减少虚拟 DOM 的 Diff 性能开销，关键在于让 Vue 的 diff 算法更快定位变化、复用更多节点、跳过无意义比较；需正确使用唯一稳定 key、拆分组件缩小作用域、避免低效结构、利用编译期优化。
减少虚拟 DOM 的 Diff 性能开销，关键在于让 Vue 的 diff 算法更快定位变化、复用更多节点、跳过无意义比较。这不是靠“避免 diff”，而是主动配合它的运行逻辑——它本身高效，但容易被误用拖慢。
确保列表项有稳定唯一的 key
key 不是可选项，而是 diff 的锚点。没有 key 或 key 动态生成（如用 index），Vue 会退化为“顺序比对”，导致大量节点被错误卸载/重建。
- ✅ 正确：用数据中天然唯一字段，如
item.id或item.uuid - ❌ 错误：用
:key="index"，尤其在插入、删除、排序时，会引发整块子树重渲染 - ⚠️ 注意：key 值不能是随机数或时间戳，否则每次 render 都不同，完全失去复用意义
缩小单次 diff 的作用域
diff 时间复杂度与待比对的 vnode 数量正相关。一个组件里包含几百个节点，哪怕只改一个字段，整个子树仍要遍历。
- 把大组件拆成多个粒度合适的子组件，每个子组件维护自己的响应式状态和 vnode 树
- 使用 defineAsyncComponent 或 v-if 控制非关键区域的挂载时机，避免无谓参与 diff
- 对静态内容（如文档说明、固定页脚）用 v-once，Vue 会跳过其后续所有 diff 比较
避免触发低效 diff 路径
Vue 的 diff 默认走“双端+key”最优路径，但某些结构会让算法降级为逐个比对甚至全量替换。
立即学习“前端免费学习笔记（深入）”；
- 同级节点类型频繁切换（如
<div>↔<span>↔<p>），会绕过复用逻辑，直接销毁重建 - 子节点顺序大幅变动时，若 key 未正确标识身份，diff 会误判为“全部新增+全部删除”
- 避免在 v-for 内部嵌套深层动态结构（如多层条件嵌套 + 动态组件），这会显著增加 vnode 构建与比对成本
利用编译期提示减少运行时负担
Vue 3 的编译器能在构建阶段识别静态节点、纯静态 class/style，并生成更精简的 vnode 结构。
- 模板中尽量用字面量而非表达式绑定静态属性：
class="btn"优于:class="'btn'" - 静态 class 和 style 可合并书写，如
class="a b" :class="{c: active}"，编译器会自动分离静态部分 - 开启 compilerOptions.hoistStatic（Vite 默认启用），将静态 vnode 提升到组件外层，diff 时直接跳过
