咱就是说Vue 的双端 Diff 算法，真的挺有意思的。

Diff 算法，其实就是用来比较新旧虚拟 DOM 树的差异，然后只geng新有变化的部分。

为啥要这么Zuo呢？哈哈，因为直接操作 DOM 太慢了我们得尽量减少不必要的 DOM 操作。

进入 patchKeyedChildren，第一件事就是设置"四个指针"：

function patchKeyedChildren { const oldChildren = n1.children // 旧的子节点数组 const newChildren = n2.children // 新的子节点数组 // 四个索引指针 let oldStartIdx = 0 let oldEndIdx = oldChildren.length - 1 let newStartIdx = 0 let newEndIdx = newChildren.length - 1 // 指针对应的实际虚拟节点 let oldStartVNode = oldChildren let oldEndVNode = oldChildren let newStartVNode = newChildren let newEndVNode = newChildren }

这四个指针分别指向新旧列表的头部和尾部。你Ke以想象成两队人面对面站着，从两头开始互相认人：

while { // 比对逻辑... }

循环条件hen好理解：只要新旧列表dou没比对完，就一直从两头往中间夹。每次成功匹配一组节点，就收缩对应指针，缩小下一轮的比对范围。

接下来kan循环内部的五种情况。

if { patch oldStartVNode = oldChildren newStartVNode = newChildren }

场景原来排在第一个的元素，geng新后还是第一个。

比如旧列表 ，新列表 ，A 的位置没变，只需要 patch geng新一下内容，然后两个头指针dou往后走一位就行。

else if { patch oldEndVNode = oldChildren newEndVNode = newChildren }

跟情况一类似，只是方向相反。旧列表Zui后一个元素在新列表里还是Zui后一个，位置不用动，两个尾指针dou往前缩一位。

else if { patch insert oldEndVNode = oldChildren newStartVNode = newChildren }

跟情况三反过来：原本在Zui后面的元素，现在要变成Zui前面。

旧列表： 新列表：

C 从尾巴跑到了开头。insert 把 C 的真实 DOM 插到旧头元素前面直接"置顶"。旧尾指针左移，新头指针右移。

else if { patch insert oldStartVNode = oldChildren newEndVNode = newChildren }

"这个就有点意思了。原本排在Zui前面

"的元素，现在要跑到Zui后面"。

A 从头挪到了尾巴。insert 的第三个参数是 oldEndVNode.el.nextSibling,也就是把 A插到旧尾元素的后面——等价于放到列表末尾。然后旧头指针右移、新尾指针左移。 害，说实话，这些场景还是挺好理解的。 不对不对，应该是先理解了场景，才Nenggeng好地掌握 Diff 算法嘛~你懂的。 咱继续~ 上面四种双端快速匹配全部失败，说明当前新头节点藏在"旧列表中间某个位置",只Neng老老实实遍历查找： else { const idxInOld = oldChildren.findIndex( node => node.key ===newStart V Node. key ) if { const vnodeToMove=old Children; patch; insert; Old Children=undefined; } else{ Patch; } news tar t V Node=new Children; }