Vue 3.0 组合式 API 最佳实践

Vue 3.0 引入的组合式 API（Composition API）为复杂组件的逻辑复用提供了更好的解决方案。相比于 Vue 2.x 的选项式 API（Options API），组合式 API 允许我们将相关的逻辑代码组织在一起，而不是分散在 data, methods, computed 等选项中。

为什么要用 Composition API？

在大型组件中，Options API 导致同一功能的代码被拆分到不同的选项中，维护时需要反复横跳。Composition API 通过 setup 函数，让我们可以按照逻辑关注点来组织代码。

核心概念

1. setup()

setup 是组件内使用 Composition API 的入口点。它在组件实例创建之前执行，因此在 setup 中无法访问 this。

2. 响应式 API：ref 与 reactive

• ref: 用于定义基本类型的响应式数据（如 string, number, boolean）。访问时需要使用 .value。
• reactive: 用于定义对象或数组的响应式数据。

import { ref, reactive } from "vue";

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ name: "Vue" });

    function increment() {
      count.value++;
    }

    return { count, state, increment };
  }
};

3. 生命周期钩子

Vue 3 将生命周期钩子重命名为 onXxx 的形式，可以在 setup 中直接调用：

• mounted -> onMounted
• updated -> onUpdated
• destroyed -> onUnmounted

4. 逻辑复用 (Composables)

这是 Composition API 最大的优势。我们可以将特定的业务逻辑（如鼠标追踪、API 请求）封装成独立的函数（Hook），然后在不同组件中复用。

// useMouse.js
import { ref, onMounted, onUnmounted } from "vue";

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

  onMounted(() => window.addEventListener("mousemove", update));
  onUnmounted(() => window.removeEventListener("mousemove", update));

  return { x, y };
}

通过组合式 API，Vue 3 不仅提供了更好的 TypeScript 支持，还为构建大型、复杂的应用提供了更坚实的基础。