Vue 3 Composition API：更优雅的组件开发方式

为什么需要 Composition API？

Options API 在复杂组件中逻辑分散，Composition API 让相关代码组织在一起。

核心概念

reactive 和 ref

import { ref, reactive } from "vue";

const count = ref(0);
const state = reactive({ name: "Vue", version: 3 });

computed

import { computed } from "vue";

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

watch

import { watch } from "vue";

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

组合式函数

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

// 组件中使用
const { count, increment } = useCounter();

生命周期

import { onMounted, onUnmounted } from "vue";

onMounted(() => console.log("mounted"));
onUnmounted(() => console.log("unmounted"));

优势

• 逻辑复用更灵活
• TypeScript 支持更好
• 代码组织更清晰

Composition API 是 Vue 3 的精髓，掌握它写出更优雅的代码！