#Vue 性能优化

让页面飞起来

#渲染优化

• v-if vs v-show：频繁切换用 v-show，不常变用 v-if
• v-for 加 key：用唯一 ID，不要用 index
• computed：复杂计算用 computed，不要用 methods

#加载优化

• 路由懒加载：component: () => import('./Page.vue')
• 异步组件：defineAsyncComponent
• 按需引入：组件库不要全量引入

#响应式优化

• shallowRef：大对象用 shallowRef，Vue 只监听 .value，不深度遍历
• markRaw：第三方库实例用 markRaw 标记，避免响应式开销
• 避免内存泄漏：组件销毁时清除定时器、解绑事件

#v-memo (Vue 3.2+)

长列表优化：

<div v-for="item in list" :key="item.id" v-memo="[item.done]">

依赖没变，直接跳过 Diff。

#虚拟列表

千条以上数据，用 vue-virtual-scroller，只渲染可视区域。