Vue 3 新特性：Composition API 深度解析与实践

Vue 3 新特性：Composition API 深度解析与实践1. 什么是 Composition API？Composition API 是 Vue 3 中引入的一组 API，旨在解决 Vue 2 中 Options API 在大型复杂组件中遇到的代码组织和逻辑复用问题。它允许开发者以函数组合的方式组织组件逻辑，使得相关联的逻辑可以集中在一起，而不是分散在 `data`、`methods`、`computed` 等选项中。1.1 设计思想更好的逻辑组织：将同一个功能相关的逻辑代码聚合在一起，提高代码的可读性和可维护性。更灵活的逻辑复用：通过自定义 Hook（或称 Composable 函数）的方式，可以轻松地在不同组件之间复用有状态的逻辑。更好的类型推导：与 TypeScript 配合使用时，Composition API 提供了更完善的类型推导支持。1.2 与 Options API 的对比特性Options APIComposition API代码组织按选项（data, methods, computed）分散按逻辑功能聚合逻辑复用Mixins（可能导致命名冲突和来源不明确）Composable 函数（清晰的来源和参数传递）类型推导相对较弱良好支持大型组件难以维护和理解易于维护和理解`this` 上下文依赖 `this`不依赖 `this`，更函数式2. Composition API 核心概念2.1 `setup` 函数`setup` 函数是 Composition API 的入口点，它在组件实例创建之前执行。在 `setup` 函数中，我们可以定义响应式状态、计算属性、方法以及生命周期钩子。<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { // 定义响应式状态 const count = ref(0); // 定义方法 const increment = () => { count.value++; }; // 生命周期钩子 onMounted(() => { console.log('Component mounted!'); }); // 暴露给模板 return { count, increment, }; }, }; </script> 2.2 响应式系统Composition API 提供了 `ref` 和 `reactive` 两个核心函数来创建响应式数据。`ref`：用于创建响应式基本类型数据（如字符串、数字、布尔值）和对象。访问 `ref` 的值需要通过 `.value`。 import { ref } from 'vue'; const count = ref(0); // count.value = 0 const name = ref('Vue'); // name.value = 'Vue' `reactive`：用于创建响应式对象（包括数组和 Map、Set 等集合类型）。它会深层地将对象转换为响应式代理。 import { reactive } from 'vue'; const state = reactive({ count: 0, user: { name: 'Alice', age: 30, }, }); state.count++; state.user.age++; `toRefs`：将 `reactive` 对象的所有属性转换为 `ref` 对象，以便在解构时保持响应性。 import { reactive, toRefs } from 'vue'; const state = reactive({ count: 0, name: 'Vue', }); const { count, name } = toRefs(state); // count 和 name 都是 ref 对象 2.3 计算属性与侦听器`computed`：用于创建计算属性，其值会根据依赖的响应式数据自动更新。 import { ref, computed } from 'vue'; const price = ref(10); const quantity = ref(2); const totalPrice = computed(() => price.value * quantity.value); `watch` 和 `watchEffect`：用于侦听响应式数据的变化并执行副作用。`watch`：精确侦听一个或多个响应式数据源，并在回调函数中获取新旧值。 import { ref, watch } from 'vue'; const count = ref(0); watch(count, (newVal, oldVal) => { console.log(`Count changed from ${oldVal} to ${newVal}`); }); `watchEffect`：立即执行一个函数，并响应式地追踪其依赖。当依赖发生变化时，函数会重新执行。 import { ref, watchEffect } from 'vue'; const count = ref(0); watchEffect(() => { console.log(`Current count is: ${count.value}`); }); 2.4 生命周期钩子Composition API 提供了与 Options API 对应的生命周期钩子函数，但它们需要在 `setup` 函数中导入并调用。Options API 钩子Composition API 钩子`beforeCreate``setup``created``setup``beforeMount``onBeforeMount``mounted``onMounted``beforeUpdate``onBeforeUpdate``updated``onUpdated``beforeUnmount``onBeforeUnmount``unmounted``onUnmounted``errorCaptured``onErrorCaptured``renderTracked``onRenderTracked``renderTriggered``onRenderTriggered`import { onMounted, onUnmounted } from 'vue'; export default { setup() { onMounted(() => { console.log('Component mounted!'); }); onUnmounted(() => { console.log('Component unmounted!'); }); }, }; 3. 实践：自定义 Composable 函数Composable 函数（或称自定义 Hook）是 Composition API 实现逻辑复用的核心机制。它是一个函数，其名称通常以 `use` 开头，用于封装和复用有状态的逻辑。3.1 创建一个 `useMousePosition` Composable// useMousePosition.js import { ref, onMounted, onUnmounted } from 'vue'; export function useMousePosition() { const x = ref(0); const y = ref(0); function update(e) { x.value = e.pageX; y.value = e.pageY; } onMounted(() => window.addEventListener('mousemove', update)); onUnmounted(() => window.removeEventListener('mousemove', update)); return { x, y }; } 3.2 在组件中使用 `useMousePosition`<template> <div> Mouse position: {{ x }}, {{ y }} </div> </template> <script> import { useMousePosition } from './useMousePosition'; export default { setup() { const { x, y } = useMousePosition(); return { x, y }; }, }; </script> 4. 总结Composition API 是 Vue 3 带来的一项重大改进，它提供了更强大、更灵活的方式来组织和复用组件逻辑。通过 `setup` 函数、`ref`、`reactive`、`computed`、`watch` 等核心 API，以及自定义 Composable 函数，开发者可以更好地应对复杂组件的开发挑战，编写出更具可读性、可维护性和可扩展性的 Vue 应用。