key缺失或不稳定会迫使vue退化为暴力更新，导致大量无效dom操作；应使用稳定唯一标识（如item.id）确保节点精准复用，避免性能瓶颈。
Vue.js 虚拟 DOM 的比对（diff）本身不是瓶颈，真正拖慢性能的，是开发者写法触发了低效比对路径。核心问题不在算法能力，而在如何让算法“少干活”。
列表更新时 key 缺失或不稳定
这是最常见、影响最直接的瓶颈来源。当 v-for 不设 key，或用索引 :key="index"，Vue 无法识别节点身份，会退化为“从头到尾逐个替换”的暴力更新模式。
- 插入/删除首项（如
unshift）时，后续所有节点都被视为“新节点”，触发大量 DOM 创建与销毁 - 移动元素（如拖拽排序）时，实际只是位置变化，却变成全量重渲染
- 正确做法：使用稳定唯一标识，如
:key="item.id"，让 Vue 复用已有 DOM 节点
组件粒度不合理导致 diff 范围过大
Vue 以组件为最小更新单元。若一个组件内部包含上千条数据+复杂模板，哪怕只改一个字段，整个组件的虚拟 DOM 树都要参与 diff。
- 典型场景：把长表格、无限滚动列表和筛选逻辑全塞进同一个组件
- 结果：一次
data变更，触发上万节点的比对，耗时可能突破 100ms - 解决思路：拆分独立子组件，用
props明确数据边界；父组件变更不影响子组件内部 diff
静态内容未被编译器识别
Vue 3 编译器能自动标记静态节点（如纯文本、无绑定属性的标签），跳过运行时 diff。但某些写法会让静态内容“变活”，失去优化机会。
- 例如：
<div>{{ 'Hello' + 'World' }}</div>看似静态，但因含插值表达式，被当作动态节点处理 - 又如：
<p :class="null">Text</p>，:class绑定存在，即使值为null，也会参与 patch - 建议：纯静态内容直接写 HTML；动态属性只在真需要时才绑定
响应式依赖过深或频繁触发
diff 前要先生成新 VNode，而 VNode 构建依赖响应式数据读取。如果 computed 或模板中访问了深层嵌套、大数组或未冻结的对象，getter 执行开销会叠加。
- 比如在循环中调用
someObject.items.map(...).filter(...)，每次 render 都执行完整链路 - 再如监听一个未
Object.freeze()的巨型对象，Proxy trap 捕获成本升高 - 可配合
markRaw跳过非响应式大数据，或用shallowRef控制响应深度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
