Vue 3 Composition API

为什么需要 Composition API？

Options API 在大型组件中逻辑分散，Composition API 让相关逻辑组织在一起。

核心 API

ref 和 reactive

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 和 watchEffect

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

生命周期钩子

import { onMounted, onUnmounted } from "vue";

onMounted(() => {
  console.log("Component mounted");
});

组合式函数

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

优势

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

Composition API 是 Vue 3 的核心特性，值得深入学习。