Vue 3的Composition API介绍

Vue 3 引入了一个新的核心特性，即 Composition API，它提供了一种更灵活、更强大的方式来组织和重用逻辑。与 Vue 2 的 Options API 相比，Composition API 允许你以一种更接近 JavaScript 函数的方式来编写组件逻辑，这特别有利于大型组件和逻辑的重用。

主要概念

1.setup() 函数

• setup() 是 Composition API 的入口点，它是一个在组件创建之前被调用的同步函数。
• 它会在 beforeCreate 和 created 生命周期钩子之前被调用，是第一个被调用的组件生命周期钩子。
• setup() 函数的返回值会暴露给模板和组件的其他选项（如计算属性、方法等）。

2. 响应式引用（Reactive References）

• Vue 3 引入了 reactive 和 ref 函数来创建响应式状态。
• reactive 用于创建对象类型的响应式状态。
• ref 用于创建基本数据类型的响应式状态（如数字、字符串等），并返回一个响应式且可变的引用对象。

3. 计算属性和监视器（Computed and Watchers）

• computed 允许你定义基于响应式状态的只读派生状态。
• watch 和 watchEffect 允许你观察响应式状态的变化并运行副作用（即当状态变化时执行的函数）。
• watchEffect 在组件首次渲染后立即执行，并在其依赖的响应式状态发生变化时重新执行。

4. 生命周期钩子

• Composition API 提供了与 Options API 中相同的生命周期钩子，但需要在 setup() 函数中通过 onMounted、onUpdated 等函数的形式导入并使用。

5. 组合函数（Composition Functions）

组合函数是可复用的代码逻辑片段，它们可以接受响应式状态作为参数并返回新的响应式状态或副作用函数。
这有助于将组件逻辑分割成更小的、可复用的部分。

示例

import { ref, onMounted } from 'vue';  
export default {  
  setup() {  
    const count = ref(0);  
    function increment() {  
      count.value++;  
    }  
    onMounted(() => {  
      console.log(`Mounted with count: ${count.value}`);  
    });  
    return {  
      count,  
      increment  
    };  
  }  
}

在上面的例子中，我们创建了一个响应式引用 count 和一个方法来增加它的值。我们还使用 onMounted 生命周期钩子来在组件挂载时打印一条消息。最后，我们将 count 和 increment 暴露给模板，以便在模板中使用它们。

总结

Vue 3 的 Composition API 提供了一种更灵活、更强大的方式来编写 Vue 组件。它通过将组件逻辑组织到可复用的函数中，使得大型组件的维护变得更加容易。此外，它还提供了更直观的响应式状态和副作用的管理方式。