Vue2 与 Vue3 Diff 算法深度解析（闭环理解）
写 Vue 最爽的事，就是我们写写模板、改改数据，页面就自动更新，完全不用手撕繁琐的 DOM 操作。
但舒服的永远是我们，干活的全是 Vue 底层。真实 DOM 操作超级“笨重费电”，无脑删改重建极其消耗性能。于是 Vue 搞出了虚拟 DOM 来轻量化模拟页面结构，而Diff 算法就是 Vue 的“精打细算大师”，专门负责尽量复用旧 DOM、能不动就不动，实现最小代价更新页面。
网上很多 Diff 讲解要么堆砌源码、要么碎片化讲概念，让人越看越懵。
这篇文章不讲废话，从自己学习感悟，以及疑惑出发，用大白话+直观案例+底层源码思维，从零闭环吃透 Diff 完整执行逻辑、Key 的本质、头尾比对机制，彻底搞懂 Vue2 无脑移动和 Vue3 LIS 最少移动的核心差距。
前置核心：吃透 Diff！全程就玩 3 个东西
不用被 Diff 源码吓住，看着几百行代码花里胡哨，底层翻来覆去只操控三个变量，记住这三句话，你就拿捏了 Diff 半壁江山：
1. tag 标签 = DOM 的盒子类型
就像快递箱子的品类，箱子类型不一样，里面东西再像也不能混用，直接扔旧的、换新的。
2. key 标识 = DOM 的唯一身份证
专门给 Diff 看的专属 ID，页面不生效、只给算法匹配用。身份证对得上，才允许复用旧盒子；对不上，直接判新节点。
3. 数组下标 = DOM 的站位位置
盒子最终站在哪、要不要挪位置，全看新旧数组下标的相对关系。页面最终排版，百分百听新数组的指挥。
终极一句人话：tag 定品类、key 定身份、下标定位置，整个 Diff 所有比对、复用、移动、删除，全是围绕这三件事在反复干活。
一、Diff 算法的核心定位与顶层铁律
我一开始以为 Diff 是“整棵树从头到尾比对一遍”，但是大错特错！
Diff 的核心宗旨极度朴实：能复用就复用，能少改就少改，坚决不做无用 DOM 操作。
它的唯一使命：最小范围更新真实 DOM，拯救页面性能。
Diff 有一条绝对不能打破的顶层铁律：
只做同层级横向对比，绝不跨层级纵向对比
- Vue 会把 DOM 树按层级“切片分层”，同辈节点互相比；
- 老爹和儿子绝不跨界比对，跨层级变动直接判死刑；
- 外层节点不能复用，内层所有子节点直接全部作废销毁。
这也是绝大多数人的误区：不要以为外层变了、内层还会精细比对更新，底层逻辑是：上层凉了，下层全员陪葬，直接重建子树。
二、Diff 第一道门槛：节点复用判定（sameVnode）
同层级只是入场资格，想要进入精细复用逻辑，必须通过「身份核验」。
Diff 判断能不能复用，只卡两个硬性条件：tag 一致+ key 一致。
1. 标签+key 全都一样：认定是同一个盒子，只是内容、样式、位置变了，保留原 DOM 外壳，只更新细节、递归对比子节点；
2. 标签不一样 / key 不一样：哪怕内容长得一模一样，直接判定是陌生人，旧 DOM 直接销毁，新建 DOM 节点。
举个简单例子：同层级 [ul, p] 换成 [p, ul] ，内容没改、只是换位置，但标签对不上，Diff 直接摆烂不走优化，全部重建。
三、子节点核心比对：四次头尾交叉比对（高频优化神器）
当一层节点大量可复用时，就会进入 updateChildren 核心逻辑。
这里纠正一个超级大误区：四次比对不是固定比四次就结束！ 它不是碰运气的四次判断，而是一套从外到内、循环收缩、持续深挖的检索策略。
算法会设置四个指针：旧头、旧尾、新头、新尾，永远按照固定优先级检索：
1. 旧头 VS 新头
2. 旧尾 VS 新尾
3. 旧头 VS 新尾
4. 旧尾 VS 新头
设计思想特别接地气
日常业务的列表变动，90% 都是：头部新增、尾部删除、首尾互换，中间节点基本纹丝不动。
所以 Vue 优先从四个边角找人：
- 匹配成功 → 指针向内收缩、缩小比对范围；
- 循环重复四套逻辑，一直往数组中间挖；
- 边缘能解决的绝不全局遍历，极致省性能。
只有四次检索全部空找、彻底匹配不到，说明列表已经彻底乱序，才会进入最后的兜底方案。
四、Diff 终极兜底：Key 哈希映射表精准查找
当列表彻底打乱、头尾优化失效，Vue 就开启「精准寻人模式」：
把当前所有未匹配的旧节点，生成一张 key → 下标 的哈希台账，相当于给所有旧 DOM 登记身份证花名册。
从此查找节点从暴力遍历 O(n)，直接干到哈希秒查 O(1)。
匹配逻辑简单粗暴：
- 新 key 在台账里不存在：全新节点，直接新增；
- 新 key 在台账里存在：精准定位旧 DOM，直接抠出来复用、挪到新位置。
这里就是 Vue2 的最大短板
Vue2 只看结果对不对，不看动作累不累。
只要 key 匹配成功，不管节点顺序需不需要动，直接暴力搬运 DOM，产生超多无效移动操作，白白消耗性能，这也是 Vue3 重点升级的痛点。
五、Diff 收尾逻辑：清理“多余员工”
所有匹配、复用、搬运结束后，统一做收尾清算：
1. 旧节点还有剩余：没人要的旧 DOM，直接裁员删除；
2. 新节点还有剩余：新来的节点，直接上岗新增。
一套操作下来，保证页面只改变化的部分，实现最小更新。
六、深度吃透 Key 机制：根治所有渲染错乱 Bug
Key 是 Diff 的灵魂开关，它不是给用户看的，是专门给 Diff 算法认节点用的。三种写法的坑和优劣，一次性讲死：
1. 唯一业务 ID（王者写法）
数据自带唯一 ID，数据不变 ID 不变。 DOM 和数据一一绑定，复用精准、不乱序、无 Bug，企业开发标准最优解。
2. 数组 index 下标（大坑重灾区）
index 是位置代号，不是数据代号。 数组删头部、排序打乱后，下标全员偏移，key 身份直接错乱。
最终出现：DOM 外壳复用对了、数据复用错了，勾选错乱、输入值串位等玄学 Bug。
3. Math.random()（可以说是瞎写，纯错误写法）
每次渲染 key 全部换新，新旧节点直接全员不匹配。 Diff 所有优化全部失效，所有 DOM 强制销毁重建，性能直接崩盘。
七、Vue2 Diff 完整闭环执行链路
帮大家串一遍从头到尾的完整流程，形成完整记忆闭环：
1. 数据更新，生成全新虚拟 DOM 树；
2. 开启同层级切片比对，跨层级变动直接重建子树；
3. 同层级通过 tag+key 判断是否可复用节点；
4. 不可复用直接销毁/新建，终止后续所有逻辑；
5. 可复用进入子节点比对，循环执行头尾交叉优化；
6. 头尾匹配失败，开启 key 哈希表兜底精准查找；
7. 匹配成功暴力搬运 DOM，失败则新建节点；
8. 清理冗余旧节点、补全新节点；
9. 页面跟随新虚拟 DOM 完成最小更新渲染。
八、Vue3 Diff 核心王炸升级：LIS 最长递增子序列
先划重点：Vue2 和 Vue3 大部分逻辑一模一样
同层比对、tag+key 判断、头尾四次比对、哈希表查找 这些前置流程 Vue2、Vue3 完全没区别！
唯一区别： 节点找完后，DOM 移动的策略不一样
- Vue2无脑搬，能复用就搬，不管需不需要动； - Vue3：聪明筛选，能不动就不动，只动真该动的。
超直观案例：一眼看懂 LIS 优化（重要）
我们用最简单、最直白的例子，看透两代 Diff 的差距：
旧节点（带原始下标） A(0)、B(1)、C(2)、D(3)、E(4)
新节点顺序 B、C、D、A、E
所有节点 key 全部匹配，所有 DOM 都能复用，只需要调位置
提取新节点对应的旧下标序列： 1、2、3、0、4
在这串数字里找最长递增子序列：
递增序列： 1、2、3、4
对应节点： B、C、D、E
人话解读核心
-
这四个节点的相对前后顺序没乱，和旧 DOM 完全对得上；
-
它们之间根本不用换位，DOM 原地躺平不动就行；
-
只有孤零零的 A(0) 顺序颠倒，全程只需要移动 A 一个节点。
Vue2 VS Vue3 真实差距
Vue2 憨憨操作
遍历新数组，匹配一个挪一个： 连续移动 B、C、D、A、E 明明四个节点不用动，硬生生执行四次无效 DOM 移动，全是冗余操作。
Vue3 精明操作
锁定最长递增子序列节点禁止移动， 只移动顺序错乱的 A 节点，极致减少 DOM 操作次数。
终极总结两代思想差异
- Vue2：只管复用 DOM，不管移动次数，结果正确就完事；
- Vue3：在复用基础上，追求最少 DOM 移动，性能压榨到极致。
九、全文梳理
看完整篇，记住这几句核心真理，彻底吃透 Diff 底层思维：
1. Diff 不是「新旧节点互相交换对位」，是拿新数组当最终排版方案，去旧 DOM 池里捡能用的盒子重新摆放；
2. DOM 外壳可无限复用，但页面最终顺序、结构、样式，百分百听新数据的；
3 key 是复用唯一凭证，index、随机数直接废掉 Diff 精准逻辑；
4 四次头尾比对是由外向内循环收缩的检索策略，不是简单四次判断；
5 Vue2 缺陷是无脑搬运 DOM，Vue3 LIS 核心：能不动坚决不动，只动必须动的节点；
6 整套 Diff 算法，从头到尾只掌控三件事：tag 定类型、key 定身份、下标定位置。
