Vue3 带来了 Composition API 和更强的响应式系统，但如果使用不当，依然会遇到性能瓶颈。本文分享5个实战调优技巧，助你打造丝滑应用体验。
技巧一：善用 shallowRef 和 shallowReactive
问题场景：大型对象或数组频繁更新时，深层响应式追踪会带来额外开销。
优化方案：对于不需要深层响应的数据，使用 shallowRef 或 shallowReactive，减少不必要的依赖收集。
const bigList = shallowRef([]) // 只追踪引用变化
bigList.value = newList // 整体替换触发更新
技巧二：合理使用 v-memo 指令
问题场景：复杂列表渲染时，即使数据未变化也会触发不必要的重新渲染。
优化方案：使用 v-memo 缓存子树，仅当依赖项变化时才重新渲染。
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
<!-- 仅当 item.selected 变化时重新渲染 -->
</div>
技巧三：异步组件与路由懒加载
问题场景：首屏加载过慢，用户体验差。
优化方案：使用 defineAsyncComponent 和路由懒加载，按需加载组件。
const HeavyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'))
技巧四：避免不必要的响应式转换
问题场景：Props 或外部数据被意外转为响应式，导致性能损耗。
优化方案：使用 toRaw 获取原始对象，使用 markRaw 标记不需要响应式的对象。
const rawData = toRaw(reactiveData)
const staticConfig = markRaw({
... })
技巧五：watchEffect 清理与 computed 缓存
问题场景：副作用未清理导致内存泄漏，重复计算拖慢渲染。
优化方案：善用 onCleanup 清理副作用，利用 computed 缓存计算结果。
watchEffect((onCleanup) => {
const timer = setInterval(() => {
}, 1000)
onCleanup(() => clearInterval(timer))
})
掌握这5个技巧，让你的 Vue3 项目性能提升一个台阶！
