Composition API是Vue.js 3.0版本中引入的一种新的编写组件的方式，旨在解决Vue.js 2.x中Options API的一些限制，并提供了一种更灵活的方式来组织和复用代码，特别是在处理大型组件或项目时。以下是对Composition API的详细介绍：
一、背景与由来
在Vue 2.x版本中，Options API是组织组件代码的主要方式，包括data、methods、computed、watch、生命周期钩子等选项。然而，随着项目的规模增大和组件的复杂性增加，这种按选项划分的方式可能会导致代码分散、难以维护，并且在代码复用方面存在一些问题。为了解决这些问题，Vue团队设计了Composition API。
二、核心概念与特点
-
setup()函数：
- Composition API的入口点，它在组件实例创建之前执行。
- 接收props和context两个参数，其中props包含传递给组件的所有属性，context是一个包含attrs、slots、emit等对象的集合。
- setup()函数返回的对象中的所有属性都会被暴露给模板和其他选项（如computed、methods），因此可以在模板中直接使用这些返回的属性。
-
响应式数据：
- 使用ref和reactive函数来创建响应式数据。
- ref用于为单个变量创建响应性，返回一个响应性对象，对象内部只有一个.value属性包含原始值。
- reactive用于创建一个响应式对象，可以将其视为Vue 2.x中的data选项的替代品。
-
计算属性与监听器：
- 使用computed函数来创建计算属性，它接受一个getter函数，并返回一个带有响应性的ref对象。
- 使用watch和watchEffect函数来监听状态的变化并执行副作用。watch接受一个源（可以是ref、reactive对象的属性或者一个函数）和一个回调函数，当源变化时会触发回调；而watchEffect则会立即执行传入的函数，并自动追踪其依赖的响应式数据。
-
生命周期钩子：
- Composition API中的生命周期钩子以on开头，例如onMounted、onUnmounted等，它们可以直接在setup()函数中调用，用于注册生命周期回调。
-
逻辑复用与代码组织：
- 通过组合多个setup()函数，可以更容易地在不同组件间复用逻辑。
- 可以按照功能将相关逻辑分组，而不是按照选项（如data、methods、computed）来组织代码，从而提高代码的可读性和可维护性。
-
TypeScript支持：
- 由于Composition API是基于函数的，因此它具有更好的TypeScript支持，允许开发者更好地类型化组件逻辑。
三、使用示例
以下是一个简单的示例，展示了如何使用Composition API来创建一个计数器组件：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
// 创建一个响应式的 count
const count = ref(0);
// 定义一个方法
const increment = () => {
count.value++;
};
// 计算属性
const doubleCount = computed(() => count.value * 2);
// 监听 count 的变化
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
});
// 返回要暴露给模板的属性
return {
count,
increment,
doubleCount,
};
},
};
</script>
在这个示例中，我们使用了ref来创建一个响应式的count变量，并定义了一个increment方法来增加其值。同时，我们还使用computed来创建了一个计算属性doubleCount，它返回count的两倍。最后，我们使用watch来监听count的变化，并在控制台中打印出旧值和新值。
四、总结
Composition API为Vue.js开发者提供了更多的灵活性和控制力，特别是在构建复杂的组件和逻辑复用方面。它不仅改进了代码的组织结构，还增强了对TypeScript的支持，使得开发体验更加流畅。掌握Composition API对于深入理解Vue 3.0的新特性和最佳实践至关重要。
