Vue3 Composition API 核心用法详解

一、Composition API 的诞生背景

Vue3 引入 Composition API 旨在解决大型项目中 Options API 的局限性。在传统写法中，组件逻辑被分散到 data、methods、computed 等选项中，导致功能模块割裂，代码复用和维护成本显著增加。Composition API 通过将逻辑按功能而非选项组织，使代码更直观、更易于复用23。

二、核心概念与基本用法

1. setup 函数

setup 是 Composition API 的入口点，在组件初始化时执行，接收 props 和 context 参数。它替代了 Options API 中的多个选项，所有响应式数据、计算属性和方法都在此定义37。例如：

javascriptCopy Code

import { ref, reactive } from 'vue'; export default { setup(props) { // 使用 ref 定义基本类型响应式数据 const count = ref(0); // 使用 reactive 定义对象类型响应式数据 const user = reactive({ name: 'Alice', age: 25 }); const increment = () => count.value++; return { count, user, increment }; } };

2. 响应式数据管理

• ‌ref 与 reactive‌：ref 用于基本类型（如数字、字符串），通过 .value 访问；reactive 用于对象类型，直接操作属性29。
• ‌toRefs‌：将 reactive 对象转换为多个 ref 对象，便于在模板中解构使用2。

3. 计算属性与侦听

• ‌computed‌：派生响应式值，如计算用户年龄的平方：

  javascriptCopy Code

  const ageSquare = computed(() => user.age * user.age);

• ‌watch 与 watchEffect‌：watch 监听特定值变化，watchEffect 自动追踪依赖并执行副作用29。

三、进阶特性

1. 生命周期钩子

Composition API 提供与 Options API 对应的生命周期函数（如 onMounted、onUnmounted），需在 setup 中导入使用38：

javascriptCopy Code

import { onMounted } from 'vue'; onMounted(() => { console.log('组件已挂载'); });

2. 上下文与插槽

setup 的第二个参数 context 包含 attrs（非 prop 属性）、slots（插槽）和 emit（事件发射），用于处理组件间通信36。

3. 自定义 Hooks

通过将逻辑封装为独立函数（如 useCounter），实现跨组件复用。例如：

javascriptCopy Code

// useCounter.js import { ref } from 'vue'; export function useCounter() { const count = ref(0); const increment = () => count.value++; return { count, increment }; }

在组件中调用：

javascriptCopy Code

import { useCounter } from './useCounter'; const { count, increment } = useCounter();

四、<script setup> 语法糖

Vue3 提供更简洁的语法糖，自动暴露顶层变量和方法，无需手动返回45：

htmlCopy Code

<script setup> import { ref } from 'vue'; const count = ref(0); const increment = () => count.value++; </script>

此写法减少了样板代码，提升了开发效率67。

五、应用场景与最佳实践

• ‌复杂组件‌：Composition API 适合逻辑密集的组件，如表单验证或数据可视化8。
• ‌代码复用‌：通过自定义 Hooks 提取通用逻辑（如网络请求或状态管理）。
• ‌性能优化‌：结合 shallowReactive 或 shallowRef 减少不必要的响应式开销8。

Composition API 通过其灵活性和可复用性，已成为 Vue3 开发的核心工具，尤其适合中大型项目的高效维护。