在 Vue 3 中，Composition API 是一项重大的新特性，它提供了一种全新的方式来组织和复用组件逻辑。与 Vue 2 中的 Options API 相比，Composition API 允许开发者将组件的响应式状态、计算属性、方法、生命周期钩子等逻辑以函数的形式组织起来，从而使得代码更加灵活和可复用。本篇文章将深入解析 Vue 3 的 Composition API。
为什么需要 Composition API？
在 Vue 2 的 Options API 中，组件的逻辑被分散在data、computed、methods、watch等选项中。这种组织方式在小型组件中可能工作得很好，但随着组件功能的增加，代码变得越来越难以理解和维护。特别是在处理大型组件或需要跨组件复用逻辑时，Options API 的局限性尤为明显。
Composition API 的出现正是为了解决这些问题。它允许开发者将相关的逻辑组合在一起，形成一个可复用的代码块。这样做不仅可以提高代码的可读性和可维护性，还可以促进逻辑复用，减少代码冗余。
Composition API 的核心概念
setup() 函数 setup() 函数是 Composition API 的入口点。它是一个在组件创建之前被调用的函数，用于设置组件的响应式状态、计算属性、方法等。与 Options API 不同的是，setup() 函数在组件的 beforeCreate 和 created 生命周期钩子之前被调用，并且它不接受 this 关键字作为参数。
代码语言：txt复制import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value ;
}
return {
count,
increment
};
}
};响应式引用（ref 和 reactive）
Vue 3 提供了 ref() 和 reactive() 两个函数来创建响应式状态。ref() 用于创建一个响应式的基础类型值（如数字、字符串等），而 reactive() 用于创建一个响应式的对象或数组。
import { ref, reactive } from 'vue';
const count = ref(0); // 响应式的数字
const state = reactive({
name: 'Vue 3',
isActive: true
}); // 响应式的对象计算属性（computed）
在 Composition API 中，你可以使用 computed() 函数来创建计算属性。计算属性是基于它们的响应式依赖进行缓存的。只有当相关依赖发生改变时，计算属性才会重新求值。
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);生命周期钩子
Vue 3 的 Composition API 提供了与 Options API 相对应的生命周期钩子函数，但它们需要被显式地从 vue 包中导入，并在 setup() 函数内部调用。
生命周期钩子
Vue 3 的 Composition API 提供了与 Options API 相对应的生命周期钩子函数，但它们需要被显式地从 vue 包中导入，并在 setup() 函数内部调用。监听器（watch 和 watchEffect）
watch() 和 watchEffect() 是 Composition API 中用于观察响应式状态变化的函数。watch() 用于观察特定的响应式引用或响应式对象属性，并在它们变化时执行回调函数。而 watchEffect() 会在其依赖的响应式状态变化时立即重新运行。
import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(count.value);
});
watch(count, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});总结
Vue 3 的 Composition API 提供了一种全新的方式来组织和复用组件逻辑，使得代码更加灵活和可维护。通过 setup() 函数、响应式引用、计算属性、生命周期钩子和监听器等核心概念，开发者可以构建出高性能、可复用的 Vue 组件。在后续的文章中，我们将继续探索 Vue 3 的其他特性和最佳实践，帮助你更好地掌握这个强大的前端框架。
