在Vue 3中，组合式API（Composition API）是一个引入的新特性，它为开发者提供了一种更灵活的方式来构建和组织组件。与传统的选项API相比，组合式API更注重逻辑的复用和逻辑的组合，让我们更容易处理大型应用中的复杂性。今天，我们将深入探讨组合式API的核心概念和用法。
1. 组合式API概述
组合式API通过 setup 函数来定义组件的逻辑。这一函数会在组件实例创建之前执行，能够访问到组件的 props、context 和响应式数据。通过组合式API，我们能够将相同功能的逻辑提取到一个地方，从而减少代码重复，提高可维护性。
以下是组合式API的一个基本结构示例：
javascript
<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return {count,increment,};},
};
</script>在上面的示例中，我们使用 ref 创建一个响应性的 count 变量，并定义了 increment 方法来增加计数值。所有数据和方法都在 setup 中声明，然后返回到模板中使用。
2. 响应式数据
2.1. ref 和 reactive
在组合式API中，我们通常使用 ref 或 reactive 来创建响应式数据。
-
ref：用于基本数据类型（如数字、字符串等）的响应式处理。javascript
import { ref } from 'vue';const count = ref(0); count.value++; // 访问 ref 值需要使用 .value -
reactive：用于对象或数组的响应式处理。javascript
import { reactive } from 'vue';const state = reactive({count: 0, });state.count++; // 直接访问属性
ref 和 reactive 的选择通常取决于数据的类型和结构。
2.2. 响应式数据的级联
使用组合式API时，ref 和 reactive 可以轻松实现深层次的响应式：
javascript
import { reactive } from 'vue';const state = reactive({user: {name: 'Alice',age: 30,},
});state.user.age++; // 直接访问3. 计算属性与侦听器
组合式API还允许我们使用 computed 和 watch 来创建计算属性和侦听器。
3.1. 计算属性
使用 computed 来声明计算属性：
javascript
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2);return {count,doubleCount,};},
};计算属性会依赖于它们的响应式依赖，只有在这些依赖改变时才会重新计算。
3.2. 侦听器
使用 watch 来侦听数据的变化：
javascript
import { ref, watch } from 'vue';export default {setup() {const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);});return { count };},
};watch 可以侦听单个值，也可以侦听一个对象的变化，实现更复杂的数据反应。
4. 生命周期钩子
在组合式API中，我们还可以通过在 setup 中使用生命周期钩子。
javascript
import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('Component mounted');});onUnmounted(() => {console.log('Component unmounted');});},
};这里我们使用 onMounted 和 onUnmounted 在组件的生命周期中执行特定操作。
5. 逻辑重用
组合式API的一个主要优点是其逻辑重用的能力。我们可以通过创建组合函数将多个逻辑结合在一起：
javascript
// useCounter.js
import { ref } from 'vue';export function useCounter() {const count = ref(0);const increment = () => {count.value++;};const decrement = () => {count.value--;};return { count, increment, decrement };
}// 在组件中使用
<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { useCounter } from './useCounter';export default {setup() {const { count, increment, decrement } = useCounter();return {count,increment,decrement,};},
};
</script>这样，我们就可以在多个组件中复用 useCounter 函数，保持代码的DRY（Don't Repeat Yourself）原则。
6. 总结
组合式API为我们提供了一种新的思考组件逻辑的方式，它使得数据和方法的组织更加灵活，适用于构建大型和复杂的应用。通过使用 setup、ref、reactive、computed、以及 watch 等功能，我们能够更清晰地表达逻辑，使得组件更易于理解和维护。
练习
- 创建一个简单的计数器应用，使用组合式API实现计数的增加和减少；
- 尝试将状态管理逻辑提取到自定义的组合函数中，如
useToggle来处理布尔状态的切换； - 在你的 Todo 应用中使用组合式API，重构组件逻辑，提高代码的复用性。
通过今天的学习，我们希望你对Vue 3的组合式API有了更深入的理解。在接下来的学习中，我们将继续探索 Vue Router 的基本用法，以帮助我们配置和管理应用的路由。保持学习的热情，明天见！
