Vue 3作为当前最热门的前端框架之一，带来了许多令人兴奋的新特性。其中，Composition API的引入彻底改变了Vue组件的编写方式，提供了更加灵活、可复用的代码组织方案。本文将深入探讨Composition API的核心概念和实践，帮助开发者升级Vue 3开发技能，构建高可复用和可维护的前端应用。
一、Setup函数：组件逻辑的入口
在Vue 3中，Composition API的核心是Setup函数。它是一个新的组件选项，用于组织组件的逻辑。Setup函数在组件创建之前执行，可以用来定义组件的状态、计算属性、方法等。与传统的Options API不同，Setup函数返回一个对象，包含了组件的所有暴露出去的属性和方法。
下面是一个使用Setup函数的基本示例：
```javascript
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
function increment() {
count.value++;
}
onMounted(() => {
console.log('Component mounted.');
});
return {
count,
increment,
};
},
};
```
在这个示例中，我们使用`ref`函数定义了一个响应式的`count`变量，并定义了一个`increment`方法来修改`count`的值。同时，我们使用`onMounted`生命周期钩子函数来执行组件挂载后的逻辑。最后，将`count`和`increment`通过返回对象的方式暴露给模板使用。
二、响应式系统：Ref和Reactive
Vue 3的响应式系统是基于Proxy实现的，提供了两种创建响应式对象的方式：`ref`和`reactive`。
`ref`函数用于创建一个包装基本类型值的响应式对象。当我们修改`ref`对象的`value`属性时，关联的模板会自动更新。例如：
```javascript
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1
```
`reactive`函数用于创建一个包装对象类型值的响应式对象。当我们修改`reactive`对象的属性时，关联的模板也会自动更新。例如：
```javascript
import { reactive } from 'vue';
const state = reactive({
count: 0,
});
console.log(state.count); // 0
state.count++;
console.log(state.count); // 1
```
需要注意的是，`ref`对象在模板中使用时会自动解包，无需通过`.value`访问；而`reactive`对象在模板中使用时，需要直接访问其属性。
三、计算属性和侦听器：Computed和Watch
在Vue 3中，可以使用`computed`函数创建计算属性，使用`watch`函数创建侦听器。
`computed`函数接收一个getter函数，并返回一个只读的响应式对象。当getter函数内部依赖的响应式对象发生变化时，计算属性会自动重新计算。例如：
```javascript
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
console.log(doubleCount.value); // 0
count.value++;
console.log(doubleCount.value); // 2
```
`watch`函数用于侦听一个或多个响应式对象的变化，并执行相应的回调函数。它接收三个参数：要侦听的源对象、回调函数和可选的配置选项。例如：
```javascript
import { ref, watch } from 'vue';
const count = ref(0);
watch(
count,
(newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}.`);
},
{ immediate: true }
);
count.value++;
// 输出: Count changed from 0 to 1.
```
四、生命周期钩子函数
Vue 3提供了一系列的生命周期钩子函数，用于在组件的不同生命周期阶段执行自定义逻辑。这些钩子函数包括：
- `onBeforeMount`：在组件挂载之前执行。
- `onMounted`：在组件挂载后执行。
- `onBeforeUpdate`：在组件更新之前执行。
- `onUpdated`：在组件更新后执行。
- `onBeforeUnmount`：在组件卸载之前执行。
- `onUnmounted`：在组件卸载后执行。
下面是一个使用生命周期钩子函数的示例：
```javascript
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const count = ref(0);
let timer = null;
onMounted(() => {
timer = setInterval(() => {
count.value++;
}, 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
return {
count,
};
},
};
```
在这个示例中，我们在组件挂载后使用`setInterval`启动一个定时器，每秒递增`count`的值。在组件卸载前，我们清除了定时器，避免内存泄漏。
五、总结
Composition API是Vue 3的重要特性之一，它为组件的逻辑组织提供了更加灵活和可复用的方案。通过使用Setup函数、响应式系统、计算属性、侦听器和生命周期钩子函数等核心概念，开发者可以更好地管理组件的状态和行为，提高代码的可维护性和可复用性。
掌握Composition API，可以帮助开发者更好地应对日益复杂的前端应用开发挑战，提高开发效率和代码质量。随着Vue 3的不断成熟和生态的完善，Composition API必将成为前端开发者必备的技能之一。
