Vue2源码解析-diff算法

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

前言

1. 当数据发生变化时，Vue是如何更新节点的？

   要知道渲染真实Dom的开销时非常大的，如果我们直接操作真实Dom树，会引起Dom树的重绘和重排，所以我们应该尽可能的减少对Dom的操作，而Vue采用Diff算法正是为了解决这一问题。

   Vue会根据真实Dom树生成一课Virtual Dom树，当Virtual Dom某个节点数据改变之后会生成一个新的Vnode，然后新的Vnode和oldVnode作对比，发现不一样的地方就直接修改在真实的Dom上，类似于打补丁。

2. Virtual Dom和真实Dom的区别？

   Virtual Dom是将真实的Dom数据抽象出来，以对象的形式模拟树的结构。比如Dom是这样的

   <div>
     <p>123</p>
   </div>  
   

   对应的Virtual Dom（伪代码）

   var Vnode = {
     tag: 'div',
     children: [
       {
         tag: 'p',
         children: [
           {
             text: '123'
           }
         ]
       }
     ]
   }
   

3. Vue中的Vnode是如何定义的？

   class VNode {
     ...
     constructor (
       tag?: string,
       data?: VNodeData,
       children?: ?Array<VNode>,
       text?: string,
       elm?: Node,
       context?: Component,
       componentOptions?: VNodeComponentOptions,
       asyncFactory?: Function
     ) {
       this.tag = tag  // html标签或者组件tag
       this.data = data // init/render/patch过程中用到的所有数据
       this.children = children
       this.text = text // html innerText
       this.elm = elm // 真实Dom节点
       this.ns = undefined
       this.context = context // Vnode所处的上下文
       this.fnContext = undefined
       this.fnOptions = undefined
       this.fnScopeId = undefined
       this.key = data && data.key // Vnode的相似的标识
       this.componentOptions = componentOptions
       this.componentInstance = undefined // Vnode的组件实例
       this.parent = undefined // 父级占位符Vnode
       this.raw = false
       this.isStatic = false
       this.isRootInsert = true
       this.isComment = false
       this.isCloned = false
       this.isOnce = false
       this.asyncFactory = asyncFactory
       this.asyncMeta = undefined
       this.isAsyncPlaceholder = false
     }
   

特点

• 同层次进行比较，不跨级
• 比较过程采用双指针的方式，由两边往中间靠拢
• 深度递归遍历的同时操作Dom

📌由于创建Dom的性能消耗很大，所以Vue会以最大程度复用原来的Dom的方式去更新节点。

具体实现

• Vue diff算法的核心实现在于updateChildren方法（源码src/core/instance/vdom/patch），附注释。

  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
  
      // removeOnly is a special flag used only by <transition-group>
      // to ensure removed elements stay in correct relative positions
      // during leaving transitions
      const canMove = !removeOnly
  
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(newCh)
      }
      
       // 新旧数组有一个遍历完成即结束循环 
      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, 同时分别将新旧开始节点后移一位 
          patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          oldStartVnode = oldCh[++oldStartIdx]
          newStartVnode = newCh[++newStartIdx]
        } else if (sameVnode(oldEndVnode, newEndVnode)) {
           // 如果旧结束节点和新结束节点相似，则执行patchVnode, 同时分别将新旧结束节点前移一位 
          patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
          oldEndVnode = oldCh[--oldEndIdx]
          newEndVnode = newCh[--newEndIdx]
        } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
           // 如果旧开始节点和新结束节点相似，则执行patchVnode后将旧开始节点移动到旧结束节点之后，同时新结束节点前移，旧开始节点后移 
          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后将旧结束节点移动到旧开始节点之前，同时旧结束节点前移，新开始节点后移 
          patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
          oldEndVnode = oldCh[--oldEndIdx]
          newStartVnode = newCh[++newStartIdx]
        } else {
           // 如果通过key映射到index的映射表不存在，则生成 
          if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
           // 如果写了key，则根据映射表找新开始节点在旧节点中的索引，反之，则遍历查询 
          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, 同时将旧数组中的节点置空，然后插入到旧开始节点之前 
              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)
      }
    } 
  

• sameVnode方面负责比较两个节点是否相似

  function sameVnode (a, b) {
    return (
      a.key === b.key && (  // 如果key不相等，则不相似 
        (  // 如果key相等，且tag（html标签），isComment（是否为注释节点）相等，都定义了data属性，而且是相似的输入类型 
          a.tag === b.tag &&
          a.isComment === b.isComment &&
          isDef(a.data) === isDef(b.data) &&
          sameInputType(a, b)
        ) || (  // 判断异步组件相等 
          isTrue(a.isAsyncPlaceholder) &&
          a.asyncFactory === b.asyncFactory &&
          isUndef(b.asyncFactory.error)
        )
      )
    )
  }
  
  function sameInputType (a, b) {
    if (a.tag !== 'input') return true  // 不是input标签，则相似 
    let i
    const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
    const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
     // 如果input的类型相等或者都为输入类型，则相似 
    return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
  } 
  
   // isTextInputType等于以下函数 
  function isTextInputType(val) {
    const map = {
      text: true,
      number: true,
      password: true,
      search: true,
      email: true,
      tel: true,
      url: true
    }
    return map[val]
  } 
  

• patchVnode方法会直接操作旧节点

  function patchVnode (
      oldVnode,
      vnode,
      insertedVnodeQueue,
      ownerArray,
      index,
      removeOnly
    ) {
      if (oldVnode === vnode) {
        return
      }
  
      if (isDef(vnode.elm) && isDef(ownerArray)) {
        // clone reused vnode
        vnode = ownerArray[index] = cloneVNode(vnode)
      }
       // 获取旧的Dom节点，同时赋值给新Vnode的elm 
      const elm = vnode.elm = oldVnode.elm
  
      if (isTrue(oldVnode.isAsyncPlaceholder)) {
        if (isDef(vnode.asyncFactory.resolved)) {
          hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
        } else {
          vnode.isAsyncPlaceholder = true
        }
        return
      }
  
      // reuse element for static trees.
      // note we only do this if the vnode is cloned -
      // if the new node is not cloned it means the render functions have been
      // reset by the hot-reload-api and we need to do a proper re-render.
      if (isTrue(vnode.isStatic) &&
        isTrue(oldVnode.isStatic) &&
        vnode.key === oldVnode.key &&
        (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
      ) {
        vnode.componentInstance = oldVnode.componentInstance
        return
      }
  
      let i
      const data = vnode.data
      if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
        i(oldVnode, vnode)
      }
  
      const oldCh = oldVnode.children
      const ch = vnode.children
      if (isDef(data) && isPatchable(vnode)) {
        for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
        if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
      }
      if (isUndef(vnode.text)) {  // 如果新Vnode不是文本节点 
        if (isDef(oldCh) && isDef(ch)) {  // 如果都存在子节点，则递归执行updateChildren 
          if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
        } else if (isDef(ch)) {
          if (process.env.NODE_ENV !== 'production') {
            checkDuplicateKeys(ch)
          }
           // 如果旧节点为文本节点，则删除文本 
          if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
           // 将新的子节点添加到旧Dom节点上 
          addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
        } else if (isDef(oldCh)) {
           // 新节点不存在子节点，则移除旧Dom中的子节点 
          removeVnodes(oldCh, 0, oldCh.length - 1)
        } else if (isDef(oldVnode.text)) {
           // 新旧节点均不存在子节点，旧节点如果是文本节点则移除 
          nodeOps.setTextContent(elm, '')
        }
      } else if (oldVnode.text !== vnode.text) {  // 如果Vnode的文本不相同，则直接重新对旧Dom节点赋值 
        nodeOps.setTextContent(elm, vnode.text)
      }
      if (isDef(data)) {
        if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
      }
    } 
  

  📌Vue会把文本单独编译为一个文本Vnode节点，不会存在一个Vnode节点既有文本又有子节点的情况

举个栗子

假设现在存在这样两个新旧Vnode节点数组，则diff算法的执行流程如下

• oldCh: [A, B, C, D]
• newCh: [E, B, A, D, F]

1. 比较A和E节点，发现不是相似节点
2. 比较D和F节点，发现不是相似节点
3. 比较A和F节点，发现不是相似节点
4. 比较E和D节点，发现不是相似节点
5. 在oldCh中查找E节点，没有找到，则新建E节点，新开始节点后移，此时
   • oldCh: [E, A, B, C, D]
   • newCh: [E, B, A, D, F]
   • newStartVnode = B，其他不变
6. 比较A和B节点，发现不是相似节点
7. 比较D和F节点，发现不是相似节点
8. 比较A 和F节点，发现不是相似节点
9. 比较B和D节点，发现不是相似节点
10. 在oldCh中查找B节点，成功找到，将B节点移动到A节点前面，新开始节点后移，此时
    • oldCh: [E, B, A, C, D]
    • newCh: [E, B, A, D, F]
    • newStartVnode = A, 其他不变
11. 比较A和A节点，相似，新旧开始节点均后移，此时
    • newStartVnode = D, oldStartVnode = C
12. 比较C和D节点，发现不是相似节点
13. 比较D和F节点，发现不是相似节点
14. 比较C和F节点，发现不是相似节点
15. 比较D和D节点，相似，将D节点移动到C节点前面，旧结束节点前移，新开始节点后移，此时
    • oldCh: [E, B, A, D, C]
    • newCh: [E, B, A, D, F]
    • oldStartVnode = oldEndVnode = D， newStartVnode = newEndVnode = F
16. 前四个条件均为比较D和F节点，发现不是相似节点
17. 在oldCh中查找F节点，没有找到，则新建F节点，新开始节点后移，此时
    • oldCh: [E, B, A, D, F, C]
    • newCh: [E, B, A, D, F]
    • newStartVnode = null
18. newCh先编译完，结束循环，将oldCh中剩余的节点（C）删除，diff完成

思考

• 如果新旧节点不相同，但新旧节点的子节点相同，Vue也会重新创建节点，包括新节点的子节点。是否有很好的方式？
• 在Diff过程中操作dom是否合理？会不会很消耗性能？

📌我们可以发现，在旧数据[A, B, C, D]经过Vue2 diff算法转变为[E, B, A, D, F]的过程中使用了五次Dom操作，但我们抛开Vue2 diff算法来看，最优的Dom操作应该是四次，即增加E， 将A移动到B后面、删除C， 增加F。也就是说Vue2 diff算法对Dom的操作不是最优的。

Vue3 diff算法优化

Vue3 的diff算法采取了完全不同的实现方式，并且引入了最长递增子序列的算法去优化diff的过程，参考文章

全面解析 vue3.0 diff算法 掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。 https://juejin.cn/post/6861960532048642061

最长递增子序列

了解一些基本概念

• 子串：一定是连续的
• 子序列：子序列不要求连续，例如：[6, 9, 12]是[1, 3, 6, 8, 9, 10, 12]的一个子序列
• 上升/递增的子序列：一定是严格上升/递增的子序列

📌子序列中元素的相对顺序必须保持和在原始数组中的相对顺序一致

针对上面的问题，我们对所有节点排序，新增节点默认为0，则

• oldCh: [A, B, C, D] => [1, 2, 3, 4]
• newCh: [E, B, A, D, F] => [0, 2, 1, 4, 0]

在newCh中，很容易看出最长递增子序列为[1, 4]（或[2, 4]），即4 => D节点是不需要移动的，那么在diff的过程中就可以取消对于D节点的移动操作，达到最优。

总结

• Vue2 的 diff算法并不能保证对Dom操作达到最优，但具有普适性。
• Vue3 采用了最长递增子序列的算法优化的diff算法，减少了对Dom的操作。