【源码解析】vue2中 dom diff的实现原理

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

前言

大家好，前面连续几篇文章中我们分享了Vuex和VueRouter相关系列的源码原理分享。接下来我们再回到Vue的源码，解析一下Vue2中的dom更新是如何实现的。我们知道Vue之所以能够取代传统的JQuery，最大的原因之一就是Vue不直接操作DOM，而是引入了虚拟DOM，大部分的中间操作都是通过直接操作虚拟DOM来完成，最后再一次性的更新真实DOM，这样就大大的提升了性能。那么当响应式数据发生变化以后，vue是如何实现DOM更新的？新老DOM之间又是如何对比的？下面来为大家一一揭晓。

虚拟DOM

上面提到来虚拟DOM的概念，我们先来看下什么是虚拟DOM。所谓的虚拟DOM其实就是用来模拟描述真实DOM结构的一个js对象。之所以引入虚拟DOM就是因为我们在频繁的操作真实DOM树时会产生很大的性能开销，那么如果建立一个与真实DOM树相对应的虚拟 DOM 对象（ js 对象），然后以对象嵌套的方式来表示 dom 树及其层级结构，那么每次 dom 的更新就变成了对js对象属性的更改，这样一来操作JS对象肯定要比直接操作真实DOM开销小的多。

DOM更新

我们在分析响应式数据原理时曾提到所有的响应式属性都会被Object.defineProperty进行数据劫持，在每个属性的set函数中都会监听属性变化，一旦属性值发生了变化就会触发set函数，然后调用dep.notify通知watcher进行更新操作，进而就会执行updateComponent方法进行组件更新那么在组件更新的时候就会通过调用patch函数进行新老虚拟DOM节点的对比操作，也就是我们所说的DOM diff。

DOM diff原理

提到dom diff首先要说的是dom diff 在进行新老节点对比的时候都是同层比较的，不会进行跨级比较，如下图所示： dom diff在进行新老虚拟节点对比时主要涉及到三个方法：patch、patchVnode和updateChildren

patch

src/core/vdom/patch.js

function patch(oldVnode, vnode, hydrating, removeOnly){
    if(isUndef(vnode)){
        if(isDef(oldVnode)) invokeDestroyHook(oldVnode)
        return
    }
    
    let isInitialPatch = false;
    const insertedVnodeQueue = []

    if(isUndef(oldVnode)){
        isInitialPatch = true
        createElm(vnode, insertedVnodeQueue)
    }else{
        const isRealElement = isDef(oldVnode.nodeType)//只有真实节点才会有nodeType属性
        if(!isRealElement && sameVnode(oldVnode, vnode)){
            patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
        }else{
            // 真实节点处理
            // ...
        }
    }
}


复制代码

在patch函数中首先判断如果新的虚拟节点不存在而老的虚拟节点存在，则直接调用invokeDestroyHook(oldVnode)将老的节点销毁
如果第一个分支没进去则说明新的虚拟节点是存在的，继续判断在新节点存在的情况下，如果老的节点不存在则调用createElm根据新的虚拟节点直接创建出真实节点
再往下的else分支中就说明新老节点都是存在的，这种情况下再看老节点是否是真实节点（这里的真实节点指的就是我们项目中的那个#app）
- 如果老节点不是真实节点，并且老节点和新节点是一样的，则调用patchVnode继续进行子节点的对比
- 下面else分支如果老的节点是真实节点，则进行针对新节点的相关操作

patchVnode

function patchVnode(oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly){
    if(oldVnode === vnode) reutrn
    ...
    const oldCh = oldVnode.children
    const ch = vnode.children
    ...
    if(isUnDef(vnode.text)){
        if(isDef(oldCh) && isDef(ch)){
            if(oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
        }else if(isDef(ch)){
            ...
            addVnodes(elm, null, ch, 0. ch.length - 1, insertedVnodeQueue)            
        }else if(isDef(oldCh)){
            removeVnodes(oldch, 0, oldch.length-1)
        }else if(isDef(oldVnode.text)){
            nodeOps.setTextContent(elm, '')
        }
    }else if(oldVnode.text !== vnode.text){
        nodeOps.setTextContent(elm, vnode.text)
    }
    ...    
}
复制代码

patchVnode中首先检查新老节点是不是同一个对象，如果是同一个对象则直接return
获取新老节点的子节点oldCh和ch
判断如果新节点不是文本节点的情况下
- 再判断如果新老节点的子节点都存在，并且新老节点的子节点（oldCh和ch）不是同一个对象，则调用updateChildren更新当前元素的子节点
- 如果新节点的子节点存在而老节点的子节点不存在，则调用addVnodes方法给当前元素现在子节点
- 如果老节点的子节点存在而新节点的子节点不存在，则调用removeVnodes方法直接把老节点的子节点移除
- 如果新节点和老节点的子节点都不存在，并且老节点是文本节点，则直接将当前元素文本清空
如果新节点是文本节点，并且老节点的文本不同，则直接使用新节点的文本替换

updateChildren

dom diff的核心就是在这个updateChildren方法上，这里的对比采用的是双指针的方式进行比较，也就是说老的开始节点与新的开始节点比较，老结束节点与新结束节点比较，老的开始节点与新的结束节点比较，老的结束节点与新的开始节点比较如下图所示

updateChildren的核心就在于while循环中，下面我们来看下源码

 function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    let oldStartIdx = 0
    let newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx, idxInOld, vnodeToMove, refElm 
    const canMove = !removeOnly

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
        if (isUndef(idxInOld)) { // New element
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    if (oldStartIdx > oldEndIdx) {
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      removeVnodes(oldCh, oldStartIdx, oldEndIdx)
    }
  }
复制代码

首先定义8个新老节点对应的开始结束节点和开始结束索引
然后重点就是进入while循环，如果老开始索引小于老的结束索引并且新的开始索引小于新的结束索引，则说明新老节点的比较还没有完成，while循环条件成立
在while循环中
- 如果老的开始节点不存在，则让老节点的开始索引加1，即向后移动一位取出后一个老节点作为老的开始节点
- 如果老的结束节点不存在，则让老节点的结束索引减1，即向前移动一位取出前一个老节点作为老的结束节点
- 老开新开： 如果老的开始节点和新的开始节点相同（sameVnode）则继续调用patchVnode方法向下比较它们的子节点，同时让老的开始索引和新的开始索引都加1，并取出对应的后一个节点分别更新老的开始节点和新的开始节点
- 老结新结： 同理，如果老的结束节点与新的结束节点相同（sameVnode）则继续调用patchVnode方法向下比较它们的子节点，同时让老的结束索引和新的结束索引都减1，并取出对应的前一个节点分别更新老的结束节点和新的结束节点
- 老开新结： 如果老的开始节点和新的结束节点相同，则继续调用patchVnode方法向下比较它们对应的子节点，同时这里做了一个额外的操作，因为这里比较的是老的开始节点和新的结束节点，所以这里调用了insertBefore方法将老的开始节点向后移动，移动到与新的结束节点对应的位置上，同时让老的开始索引加1并获取到对应索引的老的节点，让新的结束索引减1并获取到新的结束节点
- 老结新开：如果老的结束节点和新的开始节点相同，则继续调用patchVnode方法向下比较它们对应的子节点，同样这里也要做一个额外的操作，因为这里比较的是老的结束节点与新的开始节点，同样也要调用insertBefore方法将老的结束节点向前移动，移动到与新的开始节点对应的位置上，然后让老的结束索引减1并获取到对应的老的结束节点，让新的开始节点加1并获取到对应的新的开始节点
- 如果以上条件都不成立，则会从新的开始节点开始与每一个老的节点进行挨个比较
while循环结束后，如果老的开始索引已经大于老的结束索引了，则说明老节点的个数比新节点少，这时则会调用addVnodes进行添加
如果新的开始索引大于新的结束索引老，则说明新节点的个数比老节点的少，则调用removeVnodes进行移除

总结

以上就是dom diff的源码解读了。本次分享我们分别介绍了虚拟DOM，dom的更新操作流程，以及dom diff的源码解读。通过对patch，patchVnode和updateChildren三个方法的源码分析，让我们了解了dom diff的对比流程，简单总结：

就是数据发生变化时会触发set函数，在set函数中则会触发对应的组件更新，组件更新又会调用到patch方法，在patch中先进行根虚拟dom的比较，然后再调用patchVnode实现子节点的对比，在patchVnode中又会调用到updateChildren方法，在updateChildren中会进行新老节点的不同顺序的对比，同时递归调用patchVnode继续对子节点进行比较，直到最后实现真实DOM的更新操作