本文聚焦Diff算法核心原理、执行步骤、核心源码实现与更新机制对比。一、前置共识：Diff在整个更新机制中的位置Vue的更新机制是一条完整链路，Diff只是其中一环，先把整条链路讲清楚：数据变化 → 触发响应式通知 → 组件重新render → 生成新VNode树 → Diff对比新旧VNode → Patch更新真实DOM核心原则：同层比较，不跨层。完整树对比复杂度O(n³)不可用，Vue和React都做了同层对比的工程妥协，将复杂度降至O(n)。Diff算法最复杂的场景，就是同层子节点列表的对比，这也是Vue2和Vue3差异最大的地方。二、Vue2 Diff算法：双端比较法（双指针）2.1 算法原理Vue2采用双端比较策略，用四个指针分别指向新旧列表的首尾，每一轮优先对比两端的节点，命中则直接复用并移动指针；四次都没命中时，再用新列表头部节点去旧列表中遍历查找。2.2 四个核心指针旧列表：oldStartIdx → ... ← oldEndIdx 新列表：newStartIdx → ... ← newEndIdx2.3 执行步骤（逐轮循环）每一轮循环按以下顺序做4次比较：第1次：旧头 vs 新头相同：两个头指针都后移一位，进入下一轮不同：继续下一次比较第2次：旧尾 vs 新尾相同：两个尾指针都前移一位，进入下一轮不同：继续下一次比较第3次：旧头 vs 新尾相同：旧头节点移动到旧尾后面，旧头指针后移，新尾指针前移不同：继续下一次比较第4次：旧尾 vs 新头相同：旧尾节点移动到旧头前面，旧尾指针前移，新头指针后移不同：进入兜底查找兜底：遍历查找拿新头节点的key，去旧列表中遍历找相同key的节点找到：把该节点移动到旧头前面，旧列表对应位置标记为null，新头指针后移没找到：新建节点插入到旧头前面，新头指针后移循环终止条件：旧列表或新列表的头指针超过尾指针（有一方先遍历完）收尾处理：旧列表先走完：新列表剩余的节点全部新增新列表先走完：旧列表剩余的节点全部删除2.4 流程图是否是否是 Vue 2与Vue3.diff算法比对
本文聚焦Diff算法核心原理、执行步骤、核心源码实现与更新机制对比。一、前置共识：Diff在整个更新机制中的位置Vue的更新机制是一条完整链路，Diff只是其中一环，先把整条链路讲清楚：数据变化 → 触发响应式通知 → 组件重新render → 生成新VNode树 → Diff对比新旧VNode → Patch更新真实DOM核心原则：同层比较，不跨层。完整树对比复杂度O(n³)不可用，Vue和React都做了同层对比的工程妥协，将复杂度降至O(n)。Diff算法最复杂的场景，就是同层子节点列表的对比，这也是Vue2和Vue3差异最大的地方。二、Vue2 Diff算法：双端比较法（双指针）2.1 算法原理Vue2采用双端比较策略，用四个指针分别指向新旧列表的首尾，每一轮优先对比两端的节点，命中则直接复用并移动指针；四次都没命中时，再用新列表头部节点去旧列表中遍历查找。2.2 四个核心指针旧列表：oldStartIdx → ... ← oldEndIdx 新列表：newStartIdx → ... ← newEndIdx2.3 执行步骤（逐轮循环）每一轮循环按以下顺序做4次比较：第1次：旧头 vs 新头相同：两个头指针都后移一位，进入下一轮不同：继续下一次比较第2次：旧尾 vs 新尾相同：两个尾指针都前移一位，进入下一轮不同：继续下一次比较第3次：旧头 vs 新尾相同：旧头节点移动到旧尾后面，旧头指针后移，新尾指针前移不同：继续下一次比较第4次：旧尾 vs 新头相同：旧尾节点移动到旧头前面，旧尾指针前移，新头指针后移不同：进入兜底查找兜底：遍历查找拿新头节点的key，去旧列表中遍历找相同key的节点找到：把该节点移动到旧头前面，旧列表对应位置标记为null，新头指针后移没找到：新建节点插入到旧头前面，新头指针后移循环终止条件：旧列表或新列表的头指针超过尾指针（有一方先遍历完）收尾处理：旧列表先走完：新列表剩余的节点全部新增新列表先走完：旧列表剩余的节点全部删除2.4 流程图是否是否是 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
