Vue3的组合式API介绍

在 Vue3 中，新增了组合式API，使开发人员能够更轻松地编写可组合、可测试和可重用的代码。它们提供了一种用逻辑分离组件中有用代码的方式。让我们了解如何使用它们。

首先，让我们看一个简单的例子，介绍组合式API如何使用：

import { ref } from 'vue';
 
export default {
  setup() {
    //定义响应式变量
    const count = ref(0);
    
    //定义响应式方法
    const increment = () => {
      count.value++;
    };
    
    //返回变量和方法
    return {
      count,
      increment
    };
  }
}

在这个例子中，我们使用了setup() 函数来定义响应式变量和方法，然后从这个函数中返回它们。这些变量和方法可以在组件中使用，就像普通的 data 属性和 methods 方法一样使用。

让我们更深入地了解组合式API的几个特性：

1. 响应式变量和方法

在上面的例子中，我们使用了ref() 函数来定义响应式的 count 变量。这意味着当它发生变化时，组件会自动重新渲染。

2. 生命周期钩子

在 Vue2 中，我们可以使用生命周期钩子函数来控制组件的行为。在 Vue3 中，我们可以使用新的onXXX() 函数代替它们。

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('组件已经挂载');
    });
  }
}

在这个例子中，我们使用onMounted() 函数来在组件被挂载后立即调用函数。我们可以使用onBeforeMount() 来在组件挂载之前调用函数，同理也可以使用onBeforeUpdate() ，onUpdated() ，onBeforeUnmount() ，onUnmounted() 函数。

3. 全局与局部组合式API

Vue3 可以在全局范围内使用组合式 API，即可以在任何组件中使用它们。要在全局范围内使用它们，可以在应用程序的入口文件中注册它们。同样，我们还可以在组件级别上使用它们，这样有助于分离关注点。

import { ref } from 'vue';
 
export default {
  setup(props) {
    const count = ref(0);
    
    console.log(props.msg);
    
    return {
      count
    };
  }
}

在这个例子中，我们可以在组件的setup() 函数中访问传递给组件的 props。这样就可以使用它们来生成响应式变量和方法。

组合式API是 Vue3 中一个有用的功能，它使开发人员能够更轻松地编写可组合、可测试和可重用的代码。