Vue diff 算法

一、diff 算法

diff 算法是一种通过同层的树节点进行比较的高效算法，避免对树的逐层遍历，减少时间复杂度。

diff 算法的两个特点：

只会同级比较，不会跨层。
diff 比较循环都是从两边往中间收拢。

二、Vue diff 算法

Vue的虚拟 dom diff 核心在于 patch 过程

2.1 首先将新旧 vNode 进行开始位置和结束位置的标记

let oldStartIndex = 0;
let oldEndIndex = oldChildren.length - 1;
let oldStartVnode = oldChildren[0];
let oldEndVnode = oldChildren[oldEndIndex];
let newStartIndex = 0;
let newEndIndex = newChildren.length - 1;
let newStartVnode = newChildren[0];
let newEndVnode = newChildren[newEndIndex];

2.2 标记好节点位置，进行循环处理节点

如果当前 oldStartVnode 和 newStartVnode 节点相同，直接用新节点复用老节点，进行 patchVnode 复用，更新 oldStartVnode、newStartVnode、oldStartIndex++、newStartIndex++。
如果当前 oldEndVnode 和 newEndVnode 节点相同，直接用新节点复用老节点，进行 patchVnode 复用，更新 oldEndVnode、newEndVnode、oldEndIndex--、newEndIndex--。
如果当前 oldStartVnode 和 newEndVnode 节点相同，直接用新节点复用老节点，进行 patchVnode 复用，将老节点移动到 oldEndVnode 节点之后，更新 oldStartVnode、newEndVnode、oldStartIndex++、newEndIndex--。
如果当前 oldEndVnode 和 newStartVnode 节点相同，直接用新节点复用老节点，进行 patchVnode 复用，将老节点移动到 oldStartVnode之前，更新 oldStartVnode、newEndVnode、oldEndIndex--、newStartIndex--。
如果都不满足则没有相同节点复用，进行 key 的对比，满足条件进行 patchVnode 过程，并将 dom 移动到 oldStartVnode 对应的真实 dom 之前，没找到则重新创建。

2.3 递归处理

三、Vue diff 图解

第一步：创建四个指针，分别为旧 Vnode 的开始指针和结束指针，新 Vnode 的开始指针和结束指针。
第二步：先比较旧 Vnode 的开始指针和新 Vnode 的开始指针，即A和E，发现不是同一个节点。
第三步：再比较旧 Vnode 的结束指针和新 Vnode 的结束指针，即D和F，依然不是相同节点。
第四步：再比较旧 Vnode 的开始指针和新 Vnode 的结束指针，即A和F，不是相同节点。
第五步：再比较旧 Vnode 的结束指针和新 Vnode 的开始指针，即E和D，不是相同节点。
第六步：通过上述四种对比方式都不是相同节点，下面就在旧 Vnode 节点中查找是否有与E节点相同的节点。
第七步：发现旧 Vnode 节点中没有E节点，那么就会在旧 Vnode 开始指针前插入一个新的E节点。
第八步：第一个节点操作完后，指针后移，继续进行比较，重复第二至第七步，结果为新增、删除、移动。
第九步：当找到相同节点时，会通过patchVnode进行这两个节点更细致的diff。

总结

每次diff都会调用updateChildren方法来比较，然后层层递归下去，直到将旧Vnode和新Vnode中的所有子节点对比完。domDiff的过程更像是两个树的比较，每找到相同节点时，都会一层层的往下比较它们的子节点，是一个深度递归遍历比较的过程。