Vue3渲染器之双端Diff算法

先拿上一节简单Diff作比较

     let vnode = reactive({
            type: 'div',
            children: [
                { type: 'p', children: '1', key: 1 },
                { type: 'p', children: '2', key: 2 },
                { type: 'p', children: '3', key: 3 }
            ]
        })
        
      vnode.children =
            [
                { type: 'p', children: '3', key: 3 },
                { type: 'p', children: '1', key: 1 },
                { type: 'p', children: '2', key: 2 }
            ]

简单Diff在这种情况下要移动两次,但是我们可以直接看出只需要移动key为3的元素既可,也就是一次移动.

其实双端Diff并不复杂,也就是首首,尾尾,首尾,尾首比较.先获取四个索引值以及四个索引指向的 vnode 节点

const oldChildren = n1.children 
const newChildren = n2.children
// 四个索引值
let oldStartIdx = 0 
let oldEndIdx = oldChildren.length - 1 
let newStartIdx = 0 
let newEndIdx = newChildren.length - 1
// 四个索引指向的 vnode 节点
let oldStartVNode = oldChildren[oldStartIdx] 
let oldEndVNode = oldChildren[oldEndIdx] 
let newStartVNode = newChildren[newStartIdx] 
let newEndVNode = newChildren[newEndIdx]

直接上代码解释流程

   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
                    if (oldStartVNode.key === newStartVNode.key) {
                        // 调用 patch 函数在 oldStartVNode 与 newStartVNode 之间打补丁
                        patch(oldStartVNode, newStartVNode, container)
                        // 更新相关索引，指向下一个位置
                        oldStartVNode = oldChildren[++oldStartIdx]
                        newStartVNode = newChildren[++newStartIdx]
                    } else if (oldEndVNode.key === newEndVNode.key) {
                        patch(oldEndVNode, newEndVNode, container)
                        oldEndVNode = oldChildren[--oldEndIdx]
                        newEndVNode = newChildren[--newEndIdx]
                    } else if (oldStartVNode.key === newEndVNode.key) {
                        patch(oldStartVNode, newEndVNode, container)
                        insert(oldStartVNode.el, container,
                        oldEndVNode.el.nextSibling)
                        oldStartVNode = oldChildren[++oldStartIdx]
                        newEndVNode = newChildren[--newEndIdx]
                    } else if (oldEndVNode.key === newStartVNode.key) {
                        patch(oldEndVNode, newStartVNode, container)
                        insert(oldEndVNode.el, container, oldStartVNode.el)
                        oldEndVNode = oldChildren[--oldEndIdx]
                        newStartVNode = newChildren[++newStartIdx]
                    }
                }

1. 如果首首,尾尾比较相同.只需要执行patch打补丁,并且更新相关索引.
2. 如果首尾,尾首相同.除了执行patch打补丁,更新相关索引之外,还要移动元素到指定位置.

拿最上面的例子来说,旧数组的尾和新数组的首相同.所以需要将旧数组的尾移到开始的位置即

insert(oldEndVNode.el, container, oldStartVNode.el)

补充一下insertBefore只是移动元素,并不是新增一个元素.

那如果上面四种情况都没有出现呢,简单来说就是拿新的一组子节点中的头部节点去旧的一组子节点中寻找

// 遍历旧 children，试图寻找与 newStartVNode 拥有相同 key 值的元素
const idxInOld = oldChildren.findIndex(node = >node.key === newStartVNode.key)
// idxInOld 大于 0，说明找到了可复用的节点，并且需要将其对应的真实DOM 移动到头部
if (idxInOld > 0) {
    // idxInOld 位置对应的 vnode 就是需要移动的节点
    const vnodeToMove = oldChildren[idxInOld]
    // 不要忘记除移动操作外还应该打补丁
    patch(vnodeToMove, newStartVNode, container)
    // 将 vnodeToMove.el 移动到头部节点 oldStartVNode.el 之前，因此使用后者作为锚点
    insert(vnodeToMove.el, container, oldStartVNode.el)
    // 由于位置 idxInOld 处的节点所对应的真实 DOM 已经移动到了别处，因此将其设置为 undefined
    oldChildren[idxInOld] = undefined
    // 最后更新 newStartIdx 到下一个位置
    newStartVNode = newChildren[++newStartIdx]
}

这里可能有几个疑问

1. 为什么最后只更新了newStartIdx,newStartVNode.没有更新旧数组的下标及其VNode呢.因为只是移动了DOM,对旧数组没有影响.也就是说不要把DOM的排序当成旧数组的排序,旧数组的头下标依然是0
2. oldChildren[idxInOld] = undefined,因为这个元素已经被插入到别的位置,如果循环遇到这个下标不需要处理,直接更新下标既可.所以在刚开始进行diff还要做个条件判断.总之不要把DOM的排序当成旧数组的排序

//旧数组开始和结尾索引都可能走到这个`坑`
if (!oldStartVNode) {
    oldStartVNode = oldChildren[++oldStartIdx]
} else if (!oldEndVNode) {
    oldEndVNode = oldChildren[--oldEndIdx]
}else if
//省略部分代码,代表四种首尾有相同,以及都不同的情况

接下来讨论如何添加新元素,卸载旧元素

在上面这种情况下,如何按照之前的逻辑,新数组的最后一个节点将不会被挂载

这种情况下旧数组元素也将不会被卸载

接下来介绍如何处理需要挂载或者卸载

 //这个循环条件结束之后还应该做挂载与卸载的操作
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx)
//省略代码

// 循环结束后检查索引值的情况，
if (oldEndIdx < oldStartIdx && newStartIdx <= newEndIdx) {
    // 如果满足条件，则说明有新的节点遗留，需要挂载它们
    for (let i = newStartIdx; i <= newEndIdx; i++) {
      patch(null, newChildren[i], container, )
    }
}
//与处理新增节点类似，我们在 while 循环结束后又增加了一个
// else...if 分支，用于卸载已经不存在的节点。索
// 引值位于 oldStartIdx 和 oldEndIdx 这个区间内的节点都应该被
// 卸载，于是我们开启一个 for 循环将它们逐一卸载。
else if (newEndIdx < newStartIdx && oldStartIdx <= oldEndIdx) {
    // 移除操作
    for (let i = oldStartIdx; i <= oldEndIdx; i++) {
        unmount(oldChildren[i])
    }
}

但是上面挂载还少了一种情况,即在while循环里,首尾全部不相同的情况下,到旧数组中查找是否有新数组第一个元素对应的key,如果有就将旧数组中找到的元素移动到头的位置.如果没有就需要挂载

//省略代码
else {
  const idxInOld = oldChildren.findIndex(node = >node.key === newStartVNode.key) 
  if (idxInOld > 0) {
    const vnodeToMove = oldChildren[idxInOld] 
    patch(vnodeToMove, newStartVNode, container) 
    insert(vnodeToMove.el, container, oldStartVNode.el) 
    oldChildren[idxInOld] = undefined
  } else {//新增
    // 将 newStartVNode 作为新节点挂载到头部，使用当前头部节点oldStartVNode.el 作为锚点
    patch(null, newStartVNode, container, oldStartVNode.el)
  }
  // 最后更新 newStartIdx 到下一个位置
  newStartVNode = newChildren[++newStartIdx]
}