Vue 3 Composition API 完全指南

为什么使用 Composition API？

• 更好的逻辑复用
• 更灵活的组织代码
• 更好的 TypeScript 支持
• 更小的打包体积

核心概念

ref - 响应式引用

import { ref } from "vue";

const count = ref(0);
console.log(count.value); // 访问需要.value
count.value++;

reactive - 响应式对象

import { reactive } from "vue";

const state = reactive({
  count: 0,
  user: { name: "Alice" }
});
state.count++;

computed - 计算属性

import { computed } from "vue";

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

watch - 侦听器

import { watch } from "vue";

watch(count, (newVal, oldVal) => {
  console.log(`从${oldVal}变为${newVal}`);
});

组合式函数（Composables）

// 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 } = useCounter(10);

生命周期钩子

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

setup() {
  onMounted(() => {
    console.log("组件已挂载");
  });
  
  onUpdated(() => {
    console.log("组件已更新");
  });
  
  onUnmounted(() => {
    console.log("组件已卸载");
  });
}

实际案例：表单处理

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

export function useForm(initialData) {
  const formData = reactive({ ...initialData });
  const errors = ref({});
  const isSubmitting = ref(false);
  
  const isValid = computed(() => {
    return Object.keys(errors.value).length === 0;
  });
  
  const validate = (rules) => {
    errors.value = {};
    for (const [field, rule] of Object.entries(rules)) {
      if (!rule.validator(formData[field])) {
        errors.value[field] = rule.message;
      }
    }
  };
  
  return { formData, errors, isSubmitting, isValid, validate };
}

Composition API 让 Vue 代码更模块化、更易维护！