Vue 3 Composition API 实战指南

为什么使用 Composition API？

• 更好的代码组织：按逻辑功能组织代码
• 更强的类型推导：TypeScript 友好
• 更灵活的复用：自定义 Hooks
• 更小的打包体积：Tree-shaking 优化

核心 API 详解

ref 与 reactive

import { ref, reactive } from "vue";

// ref - 基本类型
const count = ref(0);
console.log(count.value); // 访问需要.value

// reactive - 对象类型
const state = reactive({
  name: "张三",
  age: 25
});
console.log(state.name); // 直接访问

computed 计算属性

import { computed } from "vue";

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

const fullName = computed(() => {
  return firstName.value + lastName.value;
});

watch 监听器

import { watch } from "vue";

// 监听单个值
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`);
});

// 监听多个值
watch([firstName, lastName], ([newFirst, newLast]) => {
  console.log("name changed");
});

生命周期钩子

import { onMounted, onUnmounted } from "vue";

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

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

自定义 Hooks

// useCounter.js
import { ref } from "vue";

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

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

实战：用户数据管理

import { ref, computed, onMounted } from "vue";

export function useUser(userId) {
  const user = ref(null);
  const loading = ref(false);
  const error = ref(null);
  
  const userName = computed(() => user.value?.name || "未知用户");
  
  async function fetchUser() {
    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, userName, loading, error, refresh: fetchUser };
}

Composition API 让 Vue 3 组件更灵活、更易维护！