Vue组件更新采用基于虚拟DOM的高效diff算法，通过同层比对、双端预处理、key驱动复用及Vue3静态标记+LIS优化，在保证正确性的同时将时间复杂度从O(n³)降至接近O(n)，兼顾性能与实用性。
Vue 的组件更新不是靠重绘整棵树，而是靠 diff 算法在新旧虚拟节点（VNode）之间“找不同”，只动该动的地方。它不追求理论上的完全精确匹配，而是基于真实场景做务实优化：头尾结构常稳定、列表增删多在中间、key 通常合理唯一——这些假设让 diff 从 O(n³) 压到接近 O(n)，真正扛住业务迭代的压力。
同层比对：跳过跨级误判，守住性能底线
Vue 不会把父节点下某个子节点和另一个父节点的孙子节点去比。一旦父级 VNode 类型变了（比如 div 换成 section），整棵子树直接卸载重建。这看似“粗暴”，实则避免了大量无效递归和状态错位风险。开发中若发现组件意外重渲染，先检查父容器是否因响应式数据变动导致 tag 或 is 属性变化。
- 标签名（tag）、动态组件标识（:is）、函数式组件类型不一致 → 直接替换，不进子节点 diff
- 组件实例复用的前提是构造函数/定义一致，否则即使 key 相同也会新建实例
- 模板中避免在 v-if/v-else 分支里混用相同 tag 但不同逻辑的组件，容易触发非预期重建
双端预处理：头尾快速收口，减少中间计算
列表更新时，算法先用两个指针分别从新旧子节点数组的开头和结尾同步推进。导航栏、页脚、固定表头这类结构稳定的节点，往往几轮就全部复用完毕，根本不需要进入复杂查找阶段。这步纯线性操作，开销极低。
- 头头匹配成功 → 复用并 patch，旧头指针和新头指针都右移
- 尾尾匹配成功 → 复用并 patch，旧尾和新尾指针都左移
- 头尾或尾头匹配 → 对应 DOM 元素移动一次，而非销毁再新建
- 任一端失配即停，剩余节点范围被精确框定，后续处理目标明确
key 驱动复用：保状态、省移动、防错乱
没有 key 时，Vue 默认采用“就地复用”策略：新列表第 0 位直接 patch 旧列表第 0 位，哪怕语义上它是另一条数据。这会导致 input 光标跳失、滚动位置重置、组件内部 ref 错乱。加上 key 后，算法能按 ID 找人，而不是按座位号点名。
立即学习“前端免费学习笔记（深入）”；
- key 必须在兄弟节点间唯一，且尽量稳定（避免用 index 或 Math.random()）
- v-for 中 key 绑定对象属性（如 item.id）比绑定整个对象更安全，防止浅相等误判
- 动态组件切换时，用 key 强制触发重新挂载（如 <component :is="type" :key="type">）
Vue 3 进阶优化：静态标记 + LIS 移动规划
编译阶段 Vue 3 就给纯文本、无绑定属性的节点打上 PatchFlag，运行时 diff 直接跳过；当列表发生拖拽、filter 等乱序操作时，它不再靠 key 盲目移动，而是构建旧索引序列，用最长递增子序列（LIS）算出哪些节点本就在正确相对顺序里——这些原地不动，其余才移动，DOM 位移总量更少。
- 模板中多用 v-once 标记一次性静态内容，彻底跳过 diff
- 复杂条件分支可用 v-memo 缓存子树，避免重复 patch
- 服务端渲染（SSR）或静态站点生成（SSG）时，静态标记收益更大，首屏 diff 范围进一步压缩
