Vue 3 Composition API 实战指南

基础用法

<script setup>
import { ref, reactive, computed } from "vue";

const count = ref(0);
const state = reactive({ name: "Vue" });
const double = computed(() => count.value * 2);
</script>

生命周期钩子

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

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

侦听器

import { watch, watchEffect } from "vue";

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

watchEffect(() => {
  console.log(count.value);
});

自定义组合式函数

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

与 Options API 对比

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

Composition API 让 Vue 更灵活强大！