Vue3 Composition API 陷阱全解析

Vue3 Composition API 陷阱全解析一、引言别被Composition API的花架子迷惑Vue3的Composition API真好用——我相信这是很多前端开发者刚接触Composition API时的第一反应。但等你真正用起来就会发现这TM什么玩意儿怎么又出bug了Composition API确实给了我们更多的灵活性但也带来了更多的陷阱。就像一把双刃剑用好了是神器用不好就是灾难。今天我这个专治Vue花架子的手艺人就来给你扒一扒Composition API的那些陷阱让你少走弯路。二、生命周期陷阱别再用错onMounted2.1 生命周期钩子的执行时机template div{{ message }}/div /template script setup import { ref, onMounted, onUnmounted } from vue const message ref(Hello) // 陷阱1在onMounted之前访问DOM console.log(setup中访问DOM:, document.querySelector(div)) // 输出: null onMounted(() { console.log(onMounted中访问DOM:, document.querySelector(div)) // 输出: divHello/div }) // 陷阱2组件卸载时忘记清理 let intervalId onMounted(() { intervalId setInterval(() { console.log(定时器执行中...) }, 1000) }) // 正确做法在onUnmounted中清理 onUnmounted(() { if (intervalId) { clearInterval(intervalId) } }) /script2.2 生命周期与异步操作template div{{ data }}/div /template script setup import { ref, onMounted } from vue const data ref(Loading...) // 陷阱在onMounted中执行异步操作但组件可能已经卸载 onMounted(async () { try { // 模拟网络请求 await new Promise(resolve setTimeout(resolve, 3000)) // 组件可能已经卸载这里会报错 data.value Data loaded } catch (error) { console.error(Error:, error) } }) // 正确做法使用AbortController或标记位 import { ref, onMounted, onUnmounted } from vue const data ref(Loading...) let isMounted true onMounted(async () { try { await new Promise(resolve setTimeout(resolve, 3000)) if (isMounted) { data.value Data loaded } } catch (error) { console.error(Error:, error) } }) onUnmounted(() { isMounted false }) /script三、响应式陷阱别再被ref和reactive搞晕3.1 ref和reactive的区别script setup import { ref, reactive } from vue // 陷阱1ref在模板中自动解包但在脚本中需要.value const count ref(0) console.log(ref的值:, count.value) // 正确 console.log(ref的值:, count) // 错误输出: RefImpl { value: 0 } // 陷阱2reactive不能直接赋值 const user reactive({ name: Alice }) // 错误做法直接赋值会失去响应性 user { name: Bob } // 这样会失去响应性 // 正确做法修改属性 user.name Bob // 正确保持响应性 // 陷阱3reactive对基本类型无效 const age reactive(20) // 错误基本类型不会变成响应式 console.log(age) // 输出: 20不是响应式对象 // 正确做法使用ref const age ref(20) // 正确是响应式的 /script3.2 响应式丢失的常见场景script setup import { ref, reactive, watch } from vue // 陷阱1解构reactive对象会失去响应性 const user reactive({ name: Alice, age: 20 }) const { name, age } user // 这里name和age不是响应式的 watch(name, (newVal) { console.log(name变化了:, newVal) // 不会触发 }) // 正确做法1使用toRefs import { ref, reactive, watch, toRefs } from vue const user reactive({ name: Alice, age: 20 }) const { name, age } toRefs(user) // 现在name和age是响应式的 watch(name, (newVal) { console.log(name变化了:, newVal) // 会触发 }) // 正确做法2使用computed import { ref, reactive, watch, computed } from vue const user reactive({ name: Alice, age: 20 }) const name computed(() user.name) // 响应式的 // 陷阱2将ref作为对象属性时的解包问题 const count ref(0) const obj { count // 这里count是ref对象不是值 } console.log(obj.count) // 输出: RefImpl { value: 0 } console.log(obj.count.value) // 正确输出: 0 // 陷阱3在模板中使用ref数组 const items ref([1, 2, 3]) // 模板中使用{{ items[0] }} // 正确自动解包 // 脚本中使用items.value[0] // 正确需要.value /script四、依赖注入陷阱别再用错provide和inject4.1 provide和inject的基本用法// 父组件 script setup import { provide } from vue // 陷阱1直接provide响应式对象 const user { name: Alice } // 不是响应式的 provide(user, user) // 正确做法provide响应式数据 import { provide, ref, reactive } from vue const user ref(Alice) // 响应式的 provide(user, user) const userObj reactive({ name: Alice }) // 响应式的 provide(userObj, userObj) /script // 子组件 script setup import { inject } from vue // 陷阱2inject时没有默认值 const user inject(user) // 如果父组件没有provide会是undefined // 正确做法提供默认值 const user inject(user, Guest) // 有默认值 // 陷阱3修改inject的值 const user inject(user) user.value Bob // 可以修改但不推荐 // 推荐做法inject函数而不是值 // 父组件 provide(updateUser, (newName) { user.value newName }) // 子组件 const updateUser inject(updateUser) updateUser(Bob) // 推荐的做法 /script4.2 provide和inject的作用域// 陷阱provide的作用域问题 // 父组件 script setup import { provide, ref } from vue import Child from ./Child.vue const count ref(0) provide(count, count) function increment() { count.value } /script template div pParent: {{ count }}/p Child / /div /template // 子组件 script setup import { inject } from vue import GrandChild from ./GrandChild.vue const count inject(count) /script template div pChild: {{ count }}/p GrandChild / /div /template // 孙子组件 script setup import { inject } from vue const count inject(count) // 可以访问到因为provide是向下传递的 /script template div pGrandChild: {{ count }}/p /div /template五、计算属性和监听器陷阱别再写低效的watch5.1 computed的陷阱script setup import { ref, computed } from vue const count ref(0) // 陷阱1computed中执行副作用 const doubleCount computed(() { console.log(computed执行了) // 每次访问都会执行 return count.value * 2 }) // 正确做法computed应该是纯函数 const doubleCount computed(() { return count.value * 2 }) // 陷阱2computed依赖外部变量 let externalValue 1 const result computed(() { return count.value * externalValue // externalValue不是响应式的computed不会重新计算 }) // 正确做法依赖响应式数据 const externalValue ref(1) const result computed(() { return count.value * externalValue.value // 响应式的会重新计算 }) // 陷阱3过度使用computed // 对于简单计算直接在模板中使用表达式即可 // 只有复杂计算或需要缓存结果时才使用computed /script5.2 watch的陷阱script setup import { ref, watch } from vue const count ref(0) // 陷阱1watch基本类型时的问题 watch(count, (newVal, oldVal) { console.log(count变化了:, newVal, oldVal) }) // 陷阱2watch对象时的深度监听 const user ref({ name: Alice, age: 20 }) // 错误做法默认不会深度监听 watch(user, (newVal, oldVal) { console.log(user变化了:, newVal, oldVal) // 只有user.value被替换时才会触发 }) // 正确做法使用deep选项 watch(user, (newVal, oldVal) { console.log(user变化了:, newVal, oldVal) // 深度监听属性变化也会触发 }, { deep: true }) // 陷阱3watch数组时的问题 const items ref([1, 2, 3]) // 错误做法默认不会深度监听 watch(items, (newVal, oldVal) { console.log(items变化了:, newVal, oldVal) // 只有items.value被替换时才会触发 }) // 正确做法使用deep选项 watch(items, (newVal, oldVal) { console.log(items变化了:, newVal, oldVal) // 深度监听数组元素变化也会触发 }, { deep: true }) // 陷阱4watch多个源 const a ref(1) const b ref(2) // 正确做法使用数组 watch([a, b], ([newA, newB], [oldA, oldB]) { console.log(a或b变化了:, newA, newB, oldA, oldB) }) // 陷阱5watch的immediate选项 watch(count, (newVal, oldVal) { console.log(count变化了:, newVal, oldVal) }, { immediate: true }) // 立即执行一次 /script六、组件通信陷阱别再用错defineProps和defineEmits6.1 defineProps的陷阱// 子组件 script setup // 陷阱1类型定义错误 const props defineProps({ count: Number, // 正确 name: string // 错误应该是String }) // 正确做法使用正确的类型 const props defineProps({ count: Number, name: String }) // 陷阱2默认值设置错误 const props defineProps({ count: { type: Number, default: 0 // 正确 }, user: { type: Object, default: {} // 正确 }, items: { type: Array, default: [] // 正确 }, callback: { type: Function, default: () {} // 正确 } }) // 陷阱3修改props // 错误做法直接修改props props.count 1 // 错误props是只读的 // 正确做法通过emit通知父组件 const emit defineEmits([update:count]) emit(update:count, 1) // 正确做法2使用v-model // 父组件 Child v-model:countcount / // 子组件 const props defineProps([count]) const emit defineEmits([update:count]) function increment() { emit(update:count, props.count 1) } /script6.2 defineEmits的陷阱// 子组件 script setup // 陷阱1emit事件名大小写问题 const emit defineEmits([updateCount]) // 推荐使用kebab-case // 正确做法使用kebab-case const emit defineEmits([update-count]) // 父组件中使用 Child update-counthandleUpdate / // 陷阱2emit参数传递 const emit defineEmits([update]) function update() { emit(update, { id: 1, name: Alice }) // 可以传递多个参数 } // 父组件中接收 Child update(data) console.log(data) / // 陷阱3未定义的emit // 错误做法使用未定义的emit const emit defineEmits([update]) emit(change, 1) // 不会报错但不推荐 // 正确做法定义所有需要的emit const emit defineEmits([update, change]) emit(change, 1) // 正确 /script七、组合式函数陷阱别再写出难以维护的composables7.1 组合式函数的基本规则// 陷阱1组合式函数不返回响应式数据 import { ref } from vue // 错误做法返回普通值 function useCounter() { const count ref(0) function increment() { count.value } return { count: count.value, // 错误返回的是普通值不是响应式的 increment } } // 正确做法返回ref function useCounter() { const count ref(0) function increment() { count.value } return { count, // 正确返回ref increment } } // 陷阱2组合式函数依赖外部状态 let globalCount 0 function useCounter() { const count ref(globalCount) // 依赖外部状态不好 function increment() { count.value globalCount count.value } return { count, increment } } // 正确做法封装所有状态 function useCounter(initialValue 0) { const count ref(initialValue) // 内部状态 function increment() { count.value } return { count, increment } } // 陷阱3组合式函数没有清理逻辑 function useTimer() { const time ref(0) const intervalId setInterval(() { time.value }, 1000) return { time } // 没有清理逻辑 } // 正确做法返回清理函数 function useTimer() { const time ref(0) let intervalId function start() { intervalId setInterval(() { time.value }, 1000) } function stop() { if (intervalId) { clearInterval(intervalId) } } return { time, start, stop } } /script7.2 组合式函数的最佳实践// 好的组合式函数示例 import { ref, onMounted, onUnmounted } from vue function useMousePosition() { const x ref(0) const y ref(0) function updatePosition(e) { x.value e.clientX y.value e.clientY } onMounted(() { window.addEventListener(mousemove, updatePosition) }) onUnmounted(() { window.removeEventListener(mousemove, updatePosition) }) return { x, y } } // 使用 script setup import { useMousePosition } from ./useMousePosition const { x, y } useMousePosition() /script template divMouse position: {{ x }}, {{ y }}/div /template八、案例分析从bug到优雅代码的蜕变8.1 问题代码template div h1{{ title }}/h1 button clickincrementIncrement/button pCount: {{ count }}/p pDouble: {{ doubleCount }}/p /div /template script setup import { ref, computed, onMounted } from vue // 陷阱1直接修改props const props defineProps([title]) props.title New Title // 错误 // 陷阱2computed中执行副作用 const count ref(0) const doubleCount computed(() { console.log(Computed executed) return count.value * 2 }) // 陷阱3生命周期钩子中没有清理 let intervalId onMounted(() { intervalId setInterval(() { count.value }, 1000) }) // 陷阱4没有使用watch的深度监听 const user ref({ name: Alice, age: 20 }) function updateAge() { user.value.age // 不会触发watch } watch(user, (newVal) { console.log(User changed:, newVal) }) function increment() { count.value } /script8.2 优化后的代码template div h1{{ title }}/h1 button clickincrementIncrement/button pCount: {{ count }}/p pDouble: {{ doubleCount }}/p button clickupdateAgeUpdate Age/button pUser: {{ user.name }}, {{ user.age }}/p /div /template script setup import { ref, computed, onMounted, onUnmounted, watch } from vue // 正确1不修改props const props defineProps([title]) // 正确2computed是纯函数 const count ref(0) const doubleCount computed(() { return count.value * 2 }) // 正确3生命周期钩子中清理 let intervalId onMounted(() { intervalId setInterval(() { count.value }, 1000) }) onUnmounted(() { if (intervalId) { clearInterval(intervalId) } }) // 正确4使用watch的深度监听 const user ref({ name: Alice, age: 20 }) function updateAge() { user.value.age // 会触发watch } watch(user, (newVal) { console.log(User changed:, newVal) }, { deep: true }) function increment() { count.value } /script九、常见误区总结9.1 响应式相关ref vs reactiveref用于基本类型和需要在脚本中频繁访问的值reactive用于对象和数组响应式丢失解构reactive对象时使用toRefs将ref作为对象属性时注意解包深度监听watch对象和数组时需要使用deep选项9.2 生命周期相关执行时机onMounted之前不能访问DOMonUnmounted中需要清理资源异步操作组件卸载后避免修改状态使用标记位或AbortController9.3 组件通信相关propsprops是只读的修改需要通过emitemit使用kebab-case命名事件定义所有需要的emitprovide/injectprovide响应式数据inject时提供默认值9.4 组合式函数相关返回值返回响应式数据ref或reactive状态管理封装所有状态不依赖外部状态清理逻辑提供清理函数避免内存泄漏十、总结Vue3 Composition API给我们带来了更多的灵活性和可维护性但也带来了更多的陷阱。只有理解这些陷阱并避免它们才能写出优雅、高效的Vue3代码。记住理解响应式原理掌握ref和reactive的区别和使用场景正确使用生命周期在合适的时机执行操作及时清理资源规范组件通信遵循props只读原则使用emit进行通信编写高质量的组合式函数封装状态提供清理逻辑持续学习关注Vue3的最新特性和最佳实践别被Composition API的花架子迷惑现在就开始写出更优雅的Vue3代码吧关于作者钛态cannonmonster01前端性能优化专家专治各种Vue花架子和过度封装。标签Vue3、Composition API、响应式、生命周期、组件通信、组合式函数