Vue3 组合式API高频用法与避坑指南

# Vue3 组合式API高频用法与避坑指南 ## 前言 Vue3 主推组合式 API，但它和 Options API 的写法差异大，新手容易踩坑。本文整理高频用法和常见错误，帮助快速掌握。 ## 1. ref 与 reactive 的选择 ```javascript import { ref, reactive } from "vue"; // ref：基本类型，或需要整体替换的对象 const count = ref(0); count.value++; // 注意 .value // reactive：对象，深层响应式 const user = reactive({ name: "张三", age: 25 }); user.age++; // 直接访问，无需 .value ``` 选择原则：基本类型用 ref，对象结构固定用 reactive，复杂逻辑抽组合函数。 ## 2. 响应式丢失的坑 ```javascript // 坑：解构 reactive 会丢失响应式 const state = reactive({ count: 0 }); const { count } = state; // count 变成普通值，不再响应式 // 正确：用 toRefs 保持响应式 import { toRefs } from "vue"; const { count } = toRefs(state); // 或者直接 state.count 访问 ``` 这是组合式 API 最常见的坑，解构 reactive 对象一定要用 toRefs。 ## 3. computed 计算属性 ```javascript import { computed } from "vue"; const price = ref(100); const count = ref(2); // 只读计算属性 const total = computed(() => price.value * count.value); // 可写计算属性 const total2 = computed({ get: () => price.value * count.value, set: (val) => { price.value = val / count.value; }, }); ``` 计算属性会缓存结果，依赖不变不重新计算。 ## 4. watch 与 watchEffect ```javascript import { watch, watchEffect } from "vue"; // watch：监听特定数据 watch(count, (newVal, oldVal) => { console.log(`count 从 ${oldVal} 变成 ${newVal}`); }); // watch 监听 reactive 对象属性 watch(() => user.age, (newVal) => { console.log(newVal); }); // watchEffect：自动追踪依赖 watchEffect(() => { console.log(`当前 total: ${total.value}`); }); ``` 区别：watch 需要显式指定监听源，watchEffect 自动追踪用到的响应式数据。 ## 5. 生命周期钩子 ```javascript import { onMounted, onUnmounted } from "vue"; onMounted(() => { console.log("组件已挂载"); timer = setInterval(() => {}, 1000); }); onUnmounted(() => { // 清理定时器，防止内存泄漏 clearInterval(timer); }); ``` 组合式 API 没有 beforeCreate/created，直接在 setup 里写逻辑即可。 ## 6. 组合函数（Composables）复用 ```javascript // useCounter.js import { ref } from "vue"; export function useCounter() { const count = ref(0); const increment = () => count.value++; const decrement = () => count.value--; return { count, increment, decrement }; } // 组件中使用 import { useCounter } from "./useCounter"; const { count, increment } = useCounter(); ``` 组合函数是组合式 API 的核心优势，把逻辑抽离复用。 ## 7. provide / inject ```javascript // 祖先组件 import { provide } from "vue"; provide("theme", "dark"); // 后代组件 import { inject } from "vue"; const theme = inject("theme", "light"); ``` 适合跨多层组件传值，避免 prop 逐层传递。 ## 常见坑总结 - 解构 reactive 用 toRefs，否则丢响应式 - ref 在 script 里访问要加 .value - 定时器、事件监听记得在 onUnmounted 清理 - watch 监听对象属性用 getter 函数 - 组合函数命名以 use 开头，便于识别 ## 小结 组合式 API 的核心：ref/reactive 管理响应式、computed/watch 处理派生和监听、组合函数复用逻辑。记住解构用 toRefs、定时器要清理这两个高频坑，就能避开大部分问题。