Vue的Diff算法采用双端指针法而非双向搜索，即同步比对新旧节点列表的头尾共四个位置，按头头、尾尾、头尾、尾头优先级匹配，通过移动指针在O(n)内完成最小DOM操作。

Vue.js 的 Diff 算法（在 Vue 2 中基于 Snabbdom 思想，Vue 3 中重构为更精细的双端对比）**并不采用“从左向右与从右向左的双向搜索”这种表述方式**。这是一个常见误解——所谓“双向”，实际指**双端指针法（Two-Pointer from Both Ends）**，即同时维护新旧节点列表的头尾四个索引，在一次遍历中**同步比对首尾节点**，而非交替执行两次独立的单向搜索。

核心机制：双端同步比对（不是左右两次扫描）

Vue 的核心优化在于减少移动和创建操作。它用四个指针追踪两组节点：

• oldStartIdx / oldEndIdx：旧 VNode 列表的起始与结束下标
• newStartIdx / newEndIdx：新 VNode 列表的起始与结束下标

每轮循环中，算法按固定优先级尝试匹配：

• 先比对 oldStart ↔ newStart（头头）
• 再比对 oldEnd ↔ newEnd（尾尾）
• 若失败，尝试 oldStart ↔ newEnd（头尾：说明节点被移到末尾）
• 再尝试 oldEnd ↔ newStart（尾头：说明节点被移到开头）

为什么不是“先从左搜、再从右搜”？

真正的双向指针是**并行推进的协同过程**：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 每次只处理一个匹配（更新、复用或移动），然后相应移动某一个指针
• 例如：头头匹配成功 → 复用节点，oldStartIdx 和 newStartIdx 同时右移
• 尾头匹配成功（oldEnd 节点应插入到 newStart 位置）→ 执行 DOM 插入操作，oldEndIdx 左移，newStartIdx 右移
• 整个过程在 O(n) 时间内完成，没有回溯，也无重复遍历

关键细节：移动逻辑依赖 key 与 sameVnode 判断

能否复用节点，取决于两个条件：

• sameVnode(oldVNode, newVNode) 返回 true（标签名、key、isStatic 等一致）
• 若 key 存在且不匹配，即使标签相同也会视为不同节点，触发替换而非复用
• 当头尾均无法匹配时，会用 key map（旧节点以 key 建立哈希表）快速查找 newStart 节点在旧列表中的位置，实现 O(1) 定位

实际效果：最小化 DOM 操作

通过双端策略，算法天然适配多种常见更新场景：

• 列表追加/删除末尾项 → 尾尾匹配，高效跳过
• 列表在开头插入 → 尾头匹配，直接 insertBefore(oldEnd.el, newStart.el)
• 列表翻转 → 头尾互换多次，避免全部重建
• 中间插入 → 配合 key map 快速定位，仅移动必要节点

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！