Vue diff 算法

一、虛擬 DOM （virtual dom）

　　diff 算法首先要明確一個概念就是 diff 的對象是虛擬DOM（virtual dom），更新真實 DOM 是 diff 算法的結果。

　　注：virtual dom 可以看作是一個使用 JavaScript 模擬了 DOM結構 的樹形結構，這個樹結構包含整個DOM結構的信息

二、為什么使用 diff 算法？

　　1、頁面結構龐大時，DOM 操作代價太高，可維護性差，因此要減少 DOM 操作；

　　2、虛擬 DOM 很輕量，對虛擬 DOM 操作快；

　　3、diff 算法 是找出本次 DOM 需要更新的節點進行更新，其余不更新，對 DOM 進行原地復用，減少 DOM 創建性能耗費，可以減少瀏覽器頁面的重繪。

 

 

三、diff 算法原理

　　1、patch 原理

　　源碼

　　patch函數接收6個參數：

• oldVnode: 舊的虛擬節點或舊的真實dom節點
• vnode: 新的虛擬節點
• hydrating: 是否要跟真是dom混合
• removeOnly: 特殊flag，用於組件
• parentElm: 父節點
• refElm: 新節點將插入到refElm之前

　　

　　patch的邏輯是：

1. if vnode不存在但是oldVnode存在，說明意圖是要銷毀老節點，那么就調用invokeDestroyHook(oldVnode)來進行銷
2. if oldVnode不存在但是vnode存在，說明意圖是要創建新節點，那么就調用createElm來創建新節點

3. else 當vnode和oldVnode都存在時

• if oldVnode和vnode是同一個節點，就調用patchVnode來進行patch
• 當vnode和oldVnode不是同一個節點時，如果oldVnode是真實dom節點或hydrating設置為true，需要用hydrate函數將虛擬dom和真是dom進行映射，然后將oldVnode設置為對應的虛擬dom，找到oldVnode.elm的父節點，根據vnode創建一個真實dom節點並插入到該父節點中oldVnode.elm的位置

　　代碼如下：

　　

function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    /*vnode不存在則直接調用銷毀鈎子*/
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }

    let isInitialPatch = false
    const insertedVnodeQueue = []

    if (isUndef(oldVnode)) {
      // empty mount (likely as component), create new root element
      /*oldVnode未定義的時候，其實也就是root節點，創建一個新的節點*/
      isInitialPatch = true
      createElm(vnode, insertedVnodeQueue, parentElm, refElm)
    } else {
      /*標記舊的VNode是否有nodeType*/
      const isRealElement = isDef(oldVnode.nodeType)
      if (!isRealElement && sameVnode(oldVnode, vnode)) {
        // patch existing root node
        /*是同一個節點的時候直接修改現有的節點*/
        patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
      } else {
        if (isRealElement) {
          // mounting to a real element
          // check if this is server-rendered content and if we can perform
          // a successful hydration.
          if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
            /*當舊的VNode是服務端渲染的元素，hydrating記為true*/
            oldVnode.removeAttribute(SSR_ATTR)
            hydrating = true
          }
          if (isTrue(hydrating)) {
            /*需要合並到真實Dom上*/
            if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
              /*調用insert鈎子*/
              invokeInsertHook(vnode, insertedVnodeQueue, true)
              return oldVnode
            } else if (process.env.NODE_ENV !== 'production') {
              warn(
                'The client-side rendered virtual DOM tree is not matching ' +
                'server-rendered content. This is likely caused by incorrect ' +
                'HTML markup, for example nesting block-level elements inside ' +
                '<p>, or missing <tbody>. Bailing hydration and performing ' +
                'full client-side render.'
              )
            }
          }
          // either not server-rendered, or hydration failed.
          // create an empty node and replace it
          /*如果不是服務端渲染或者合並到真實Dom失敗，則創建一個空的VNode節點替換它*/
          oldVnode = emptyNodeAt(oldVnode)
        }
        // replacing existing element
        /*取代現有元素*/
        const oldElm = oldVnode.elm
        const parentElm = nodeOps.parentNode(oldElm)
        createElm(
          vnode,
          insertedVnodeQueue,
          // extremely rare edge case: do not insert if old element is in a
          // leaving transition. Only happens when combining transition +
          // keep-alive + HOCs. (#4590)
          oldElm._leaveCb ? null : parentElm,
          nodeOps.nextSibling(oldElm)
        )

        if (isDef(vnode.parent)) {
          // component root element replaced.
          // update parent placeholder node element, recursively
          /*組件根節點被替換，遍歷更新父節點element*/
          let ancestor = vnode.parent
          while (ancestor) {
            ancestor.elm = vnode.elm
            ancestor = ancestor.parent
          }
          if (isPatchable(vnode)) {
            /*調用create回調*/
            for (let i = 0; i < cbs.create.length; ++i) {
              cbs.create[i](emptyNode, vnode.parent)
            }
          }
        }

        if (isDef(parentElm)) {
          /*移除老節點*/
          removeVnodes(parentElm, [oldVnode], 0, 0)
        } else if (isDef(oldVnode.tag)) {
          /*調用destroy鈎子*/
          invokeDestroyHook(oldVnode)
        }
      }
    }

    /*調用insert鈎子*/
    invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
    return vnode.elm
  }

　　

　　patchVnode的邏輯是：

1. 如果oldVnode跟vnode完全一致，那么不需要做任何事情
2. 如果oldVnode跟vnode都是靜態節點，且具有相同的key，當vnode是克隆節點或是v-once指令控制的節點時，只需要把oldVnode.elm和oldVnode.child都復制到vnode上，也不用再有其他操作

3. 否則，如果vnode不是文本節點或注釋節點

   • 如果oldVnode和vnode都有子節點，且2方的子節點不完全一致，就執行updateChildren
   • 如果只有oldVnode有子節點，那就把這些節點都刪除
   • 如果只有vnode有子節點，那就創建這些子節點
   • 如果oldVnode和vnode都沒有子節點，但是oldVnode是文本節點或注釋節點，就把vnode.elm的文本設置為空字符串

4. 如果vnode是文本節點或注釋節點，但是vnode.text != oldVnode.text時，只需要更新vnode.elm的文本內容就可以

　　　　

/*patch VNode節點*/
  function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    /*兩個VNode節點相同則直接返回*/
    if (oldVnode === vnode) {
      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.
    /*
      如果新舊VNode都是靜態的，同時它們的key相同（代表同一節點），
      並且新的VNode是clone或者是標記了once（標記v-once屬性，只渲染一次），
      那么只需要替換elm以及componentInstance即可。
    */
    if (isTrue(vnode.isStatic) &&
        isTrue(oldVnode.isStatic) &&
        vnode.key === oldVnode.key &&
        (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) {
      vnode.elm = oldVnode.elm
      vnode.componentInstance = oldVnode.componentInstance
      return
    }
    let i
    const data = vnode.data
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
      /*i = data.hook.prepatch，如果存在的話，見"./create-component componentVNodeHooks"。*/
      i(oldVnode, vnode)
    }
    const elm = vnode.elm = oldVnode.elm
    const oldCh = oldVnode.children
    const ch = vnode.children
    if (isDef(data) && isPatchable(vnode)) {
      /*調用update回調以及update鈎子*/
      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)
    }
    /*如果這個VNode節點沒有text文本時*/
    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
        /*新老節點均有children子節點，則對子節點進行diff操作，調用updateChildren*/
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        /*如果老節點沒有子節點而新節點存在子節點，先清空elm的文本內容，然后為當前節點加入子節點*/
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        /*當新節點沒有子節點而老節點有子節點的時候，則移除所有ele的子節點*/
        removeVnodes(elm, oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        /*當新老節點都無子節點的時候，只是文本的替換，因為這個邏輯中新節點text不存在，所以直接去除ele的文本*/
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      /*當新老節點text不一樣時，直接替換這段文本*/
      nodeOps.setTextContent(elm, vnode.text)
    }
    /*調用postpatch鈎子*/
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

 

 

　　

　　updataChildren原理：

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    let oldStartIdx = 0 // 舊頭索引
    let newStartIdx = 0 // 新頭索引
    let oldEndIdx = oldCh.length - 1 // 舊尾索引
    let newEndIdx = newCh.length - 1 // 新尾索引
    let oldStartVnode = oldCh[0] // oldVnode的第一個child
    let oldEndVnode = oldCh[oldEndIdx] // oldVnode的最后一個child
    let newStartVnode = newCh[0] // newVnode的第一個child
    let newEndVnode = newCh[newEndIdx] // newVnode的最后一個child
    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

    // 如果oldStartVnode和oldEndVnode重合，並且新的也都重合了，證明diff完了，循環結束
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      // 如果oldVnode的第一個child不存在
      if (isUndef(oldStartVnode)) {
        // oldStart索引右移
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left

      // 如果oldVnode的最后一個child不存在
      } else if (isUndef(oldEndVnode)) {
        // oldEnd索引左移
        oldEndVnode = oldCh[--oldEndIdx]

      // oldStartVnode和newStartVnode是同一個節點
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        // patch oldStartVnode和newStartVnode， 索引左移，繼續循環
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]

      // oldEndVnode和newEndVnode是同一個節點
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        // patch oldEndVnode和newEndVnode，索引右移，繼續循環
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]

      // oldStartVnode和newEndVnode是同一個節點
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        // patch oldStartVnode和newEndVnode
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
        // 如果removeOnly是false，則將oldStartVnode.eml移動到oldEndVnode.elm之后
        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
        // oldStart索引右移，newEnd索引左移
        oldStartVnode = oldCh[++oldStartIdx]
        newEndVnode = newCh[--newEndIdx]

      // 如果oldEndVnode和newStartVnode是同一個節點
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        // patch oldEndVnode和newStartVnode
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
        // 如果removeOnly是false，則將oldEndVnode.elm移動到oldStartVnode.elm之前
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        // oldEnd索引左移，newStart索引右移
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]

      // 如果都不匹配
      } else {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

        // 嘗試在oldChildren中尋找和newStartVnode的具有相同的key的Vnode
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

        // 如果未找到，說明newStartVnode是一個新的節點
        if (isUndef(idxInOld)) { // New element
          // 創建一個新Vnode
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)

        // 如果找到了和newStartVnodej具有相同的key的Vnode，叫vnodeToMove
        } else {
          vnodeToMove = oldCh[idxInOld]
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {
            warn(
              'It seems there are duplicate keys that is causing an update error. ' +
              'Make sure each v-for item has a unique key.'
            )
          }

          // 比較兩個具有相同的key的新節點是否是同一個節點
          //不設key，newCh和oldCh只會進行頭尾兩端的相互比較，設key后，除了頭尾兩端的比較外，還會從用key生成的對象oldKeyToIdx中查找匹配的節點，所以為節點設置key可以更高效的利用dom。
          if (sameVnode(vnodeToMove, newStartVnode)) {
            // patch vnodeToMove和newStartVnode
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
            // 清除
            oldCh[idxInOld] = undefined
            // 如果removeOnly是false，則將找到的和newStartVnodej具有相同的key的Vnode，叫vnodeToMove.elm
            // 移動到oldStartVnode.elm之前
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)

          // 如果key相同，但是節點不相同，則創建一個新的節點
          } else {
            // same key but different element. treat as new element
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
          }
        }

        // 右移
        newStartVnode = newCh[++newStartIdx]
      }
    }

 

 

 　　

 

 

隨筆整理自 

　　https://www.jianshu.com/p/bf9a8b4773ee  

　　https://segmentfault.com/a/1190000008782928

　　https://www.cnblogs.com/isLiu/p/7909889.html

　　https://www.cnblogs.com/answershuto/p/7545143.html

感謝博主分享！