Vue虚拟DOM更新采用同层比较与双端指针策略：仅同级节点比对，类型不同时直接销毁重建；列表更新通过四指针从两端匹配复用节点，key存在时O(1)定位，静态节点和纯组件跳过diff。
Vue 的虚拟 DOM 更新不是简单地深度递归遍历整棵树，而是通过“同层比较 + 双端指针”策略大幅削减递归深度和比对次数。关键不在递归本身，而在如何避免无效递归、复用已有节点、跳过稳定段。
同层比较限制递归范围
Vue 的 diff 仅在相同层级的子节点间进行，不会跨层深入对比。例如父节点未变，但某个子节点被替换成完全不同类型的元素（如 div → span），Vue 直接卸载整个旧子树并挂载新子树，不再递归比对其内部结构。这从根源上切断了不必要的深层调用链。
- 节点类型不同时：直接销毁旧节点及其全部子节点，创建并插入新节点（无递归）
- 节点类型相同时：才进入属性比对与子节点更新逻辑，此时才可能触发下一层递归
- 文本节点或无子节点元素：递归终止，直接更新 innerText 或属性
双端指针跳过稳定首尾
在更新子节点列表（如 v-for 渲染的数组）时，Vue 不采用 O(n²) 的逐项嵌套查找，而是用四个指针（oldStartIdx、oldEndIdx、newStartIdx、newEndIdx）从两端向中间收缩。只要首/尾节点 key 或标识一致，就立即复用并移动指针，跳过中间大量比对。
- 旧首 ≡ 新首 → 复用该节点，指针前移
- 旧尾 ≡ 新尾 → 复用该节点，指针后移
- 旧首 ≡ 新尾 → 节点右移（执行 DOM insertBefore 操作）
- 旧尾 ≡ 新首 → 节点左移
- 以上都不匹配时，才构建 key → vnode 映射表，做一次哈希查找，而非线性遍历
key 驱动的节点复用与提前终止
有 key 的列表项让 Vue 能精准识别节点身份。当某项 key 未变，即使数据内容变动，Vue 也会复用对应的真实 DOM 元素，只更新其内部响应式数据和属性，避免重建与重挂载。若某段列表前后 key 完全一致（如排序未变、增删在末尾），双端比对几轮后指针交汇，递归更新即结束。
立即学习“前端免费学习笔记（深入）”；
- key 缺失时：Vue 默认按索引复用，易导致状态错乱和无效递归（如输入框值错位）
- key 稳定唯一时：映射表可 O(1) 定位，子节点更新逻辑快速收敛
- key 变更（如 id 重置）：触发节点销毁与重建，但仅影响该节点自身，不波及兄弟或祖先
静态提升与 patch 分离减少递归触发
Vue 编译器会将模板中静态内容（如纯文本、无绑定属性的标签）提取为常量 VNode，在多次 re-render 中复用，不参与 diff。同时，patch 过程把节点更新拆解为“属性更新”“子节点更新”“文本更新”等独立步骤，只有子节点确实变化时，才会调用 patchChildren 进入下一层递归。
- 静态节点：渲染函数中直接返回缓存 VNode，跳过所有 diff 逻辑
- 组件节点：若
shouldUpdate返回 false（如 pure 组件且 props 未变），直接跳过整个子树递归 - 文本节点更新：仅设置
node.textContent，不触发子节点遍历
