前言

自从 2020 年 Vue 3 发布以来，Composition API 已经逐渐成为 Vue 开发的主流方式。作为一名经历了 Vue 2 到 Vue 3 转变的前端工程师，我切身体会到了 Composition API 带来的开发效率提升和代码组织灵活性。在本文中，我将分享我在多个中大型项目中积累的实战经验，帮助你彻底掌握这一强大工具。

核心概念：告别 Options API 的思维模式

使用 Vue 2 的开发者都熟悉 Options API 的组件结构：将逻辑代码分散在 data、methods、computed 等选项中。而 Composition API 则采用了完全不同的思路：按功能组织代码，而非按选项类型。

下面是一个简单的计数器组件对比：

Options API 方式：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

Composition API 方式：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const count = ref(0);

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

function decrement() {
  count.value--;
}
</script>

乍看之下代码量差不多，但当组件功能增加时，Composition API 的优势就会凸显出来——相关功能可以组织在一起，甚至可以抽离到独立的函数中复用。

响应式系统：ref、reactive 和 toRefs

在 Composition API 中，响应式数据不再放在 data 选项中，而是通过一系列 API 函数创建。掌握这些 API 是你步入高级 Vue 开发的第一步。

ref：处理简单值的响应式

import { ref } from "vue";

// 创建一个响应式值
const count = ref(0);

// 访问或修改值需要使用.value
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

// 在模板中使用时不需要.value
// <div>{{ count }}</div>

在开发中我发现，一个常见的错误是忘记使用.value。记住，在 JavaScript 代码中操作 ref 时必须使用.value，但在模板中 Vue 会自动解包，不需要写.value。

reactive：处理对象的响应式

import { reactive } from "vue";

// 创建一个响应式对象
const state = reactive({
  user: {
    name: "张三",
    age: 28,
  },
  settings: {
    theme: "dark",
  },
});

// 直接修改属性即可
state.user.age = 29;
state.settings.theme = "light";

// 在模板中可以直接访问属性
// <div>{{ state.user.name }}</div>

reactive对深层对象也具有响应性，更适合处理复杂数据结构。但它有一个局限性：不能解构赋值，否则会失去响应性。

toRefs：解决 reactive 解构问题

在实际项目中，我们常常希望将响应式对象的属性解构出来单独使用，这时toRefs就派上用场了：

import { reactive, toRefs } from "vue";

const state = reactive({
  name: "张三",
  age: 28,
});

// 使用toRefs将响应式对象的所有属性转为ref
const { name, age } = toRefs(state);

// 现在name和age都是ref，修改它们会同步更新原始的state对象
name.value = "李四";
console.log(state.name); // '李四'

// 在模板中仍然可以直接使用
// <div>{{ name }} - {{ age }}</div>

生命周期钩子：从选项到函数

在 Options API 中，我们使用created、mounted等选项处理生命周期事件。在 Composition API 中，这些都变成了可以导入的函数：

import { onMounted, onUpdated, onUnmounted, onBeforeUnmount } from "vue";

onMounted(() => {
  console.log("组件已挂载");
  // 初始化逻辑，例如获取数据
  fetchData();
});

onUpdated(() => {
  console.log("组件已更新");
});

onBeforeUnmount(() => {
  console.log("组件即将卸载");
  // 清理工作
  clearInterval(timer);
});

onUnmounted(() => {
  console.log("组件已卸载");
});

注意：Composition API 中没有与beforeCreate和created对应的函数，因为setup函数本身就是在这两个生命周期内执行的。在使用<script setup>时，你写的代码就相当于在created阶段执行。

计算属性和侦听器：computed 和 watch

computed：创建计算属性

import { ref, computed } from "vue";

const firstName = ref("张");
const lastName = ref("三");

// 创建计算属性
const fullName = computed(() => {
  return firstName.value + lastName.value;
});

// 计算属性是只读的ref
console.log(fullName.value); // '张三'

// 如果需要可写的计算属性，可以提供getter和setter
const fullNameWritable = computed({
  get: () => firstName.value + lastName.value,
  set: (newValue) => {
    const names = newValue.split(" ");
    firstName.value = names[0];
    lastName.value = names[1] || "";
  },
});

watch 和 watchEffect：侦听变化

watch和watchEffect是 Composition API 中处理副作用的两种方式：

import { ref, watch, watchEffect } from "vue";

const count = ref(0);
const name = ref("张三");

// 使用watch侦听特定响应式数据
watch(
  count,
  (newValue, oldValue) => {
    console.log(`count从${oldValue}变成了${newValue}`);
  },
  { deep: true, immediate: true }
);

// 侦听多个数据源
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(
    `count: ${oldCount} -> ${newCount}, name: ${oldName} -> ${newName}`
  );
});

// watchEffect会自动追踪其内部使用的所有响应式数据
watchEffect(() => {
  console.log(`当前count: ${count.value}, name: ${name.value}`);
  // 在这里可以发送网络请求等
  fetchUserData(name.value);
});

在实际项目中，我发现watchEffect更适合于处理相对简单的副作用，而watch更适合于需要比较前后值或需要精细控制触发条件的场景。

依赖注入：provide/inject

在大型组件树中，我们经常需要跨越多个组件层级传递数据。Composition API 为我们提供了provide和inject函数：

// 父组件
import { provide, ref } from "vue";

const theme = ref("dark");
const toggleTheme = () => {
  theme.value = theme.value === "dark" ? "light" : "dark";
};

// 提供数据给后代组件
provide("theme", theme);
provide("toggleTheme", toggleTheme);

// 后代组件
import { inject } from "vue";

// 注入由祖先组件提供的数据
const theme = inject("theme");
const toggleTheme = inject("toggleTheme");

// 使用这些数据
console.log(theme.value); // 'dark'
toggleTheme(); // 切换主题

为了避免命名冲突，我建议使用 Symbol 作为 provide/inject 的 key。

组合式函数：代码复用的最佳实践

Composition API 最大的优势之一是能够将相关逻辑抽离成"组合式函数"(Composables)，以便在不同组件间复用。这相当于 Vue 2 中的 mixins，但更加灵活和强大。

// useForm.js
import { ref, computed } from "vue";

export function useForm(initialData = {}) {
  const formData = ref({ ...initialData });
  const errors = ref({});

  const resetForm = () => {
    formData.value = { ...initialData };
    errors.value = {};
  };

  const validateField = (field, rules) => {
    for (const rule of rules) {
      if (!rule.validator(formData.value[field])) {
        errors.value[field] = rule.message;
        return false;
      }
    }
    delete errors.value[field];
    return true;
  };

  const validateForm = (validationRules) => {
    let valid = true;

    for (const field in validationRules) {
      if (!validateField(field, validationRules[field])) {
        valid = false;
      }
    }

    return valid;
  };

  const isValid = computed(() => Object.keys(errors.value).length === 0);

  return {
    formData,
    errors,
    resetForm,
    validateField,
    validateForm,
    isValid,
  };
}

性能优化技巧

避免在 setup 中创建大量不必要的响应式数据
合理使用 shallowRef 和 shallowReactive
使用 v-once 和 v-memo 减少重渲染
合理拆分组件

结语

Composition API 带来的不仅是 API 的变化，更是编程思维的转变——从面向对象风格向函数式风格的转变。这种转变让我们能够更好地组织和复用代码，构建更具可扩展性的应用。

作为一名前端的开发者，我建议：

不要急于重写现有的 Options API 代码，逐步过渡是更明智的选择
尝试使用组合式函数替代 mixins 和复杂的组件
学习函数式编程的基本概念，如纯函数、副作用等
关注社区最佳实践，Vue 生态系统正在围绕 Composition API 快速发展

无论你是 Vue 新手还是老手，掌握 Composition API 都将极大提升你的开发效率和代码质量。