Vue 3 Composition API 实战

为什么需要 Composition API？

Composition API 解决了 Options API 在复杂组件中的代码组织问题，提供更好的逻辑复用和 TypeScript 支持。

核心概念

ref 和 reactive

import { ref, reactive } from "vue";

const count = ref(0);
const state = reactive({ name: "John", age: 25 });

// 修改
count.value++;
state.age++;

computed

import { computed } from "vue";

const double = computed(() => count.value * 2);

watch 和 watchEffect

import { watch, watchEffect } from "vue";

watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} -> ${newVal}`);
});

watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

生命周期

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

onMounted(() => {
  console.log("组件已挂载");
});

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

组合式函数 (Composables)

// useCounter.js
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  return { count, increment, decrement };
}

// 使用
const { count, increment } = useCounter(10);

实战：用户数据管理

export function useUser(userId) {
  const user = ref(null);
  const loading = ref(false);
  const error = ref(null);

  const fetchUser = async () => {
    loading.value = true;
    try {
      const res = await fetch(`/api/users/${userId}`);
      user.value = await res.json();
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  };

  onMounted(fetchUser);

  return { user, loading, error, refresh: fetchUser };
}

与 Options API 对比

Options API	Composition API
data	ref/reactive
computed	computed
methods	functions
mounted	onMounted

最佳实践

1. 逻辑相关的代码放在一起
2. 抽取可复用的 composables
3. 使用 TypeScript 获得更好体验
4. 避免过度抽象

总结

Composition API 是 Vue 3 的核心特性，掌握它能写出更优雅的组件代码。