跟着大佬學習vue的diff算法

前言

本文旨在理一下vue中diff算法的主要邏輯和關鍵細節。

從一個簡單的demo切入： p標籤渲染一個items數組

<div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
</div>
<script src="../vue-source/dist/vue.js"></script>
<script> const app = new Vue({ el: "#demo", data: { items: ["a", "b", "c", "d", "e"] }, mounted() { setTimeout(() => { this.items.splice(2, 0, "f") }, 2000) } }) </script>
複製代碼

先把實際順序說明：

1. items數據發生變化 Dep.notify
2. patch(oldVNode, vnode, ...)
3. patchVnode(oldVnode, vnode, insertedVnodeQueue, ...) ps: diff從這裏就開始了 insertedVnodeQueue是patch函數中定義的常量，在後期的diff裏面一直維護着，典型的閉包結構。
4. updateChildren() diff的核心方法

sameVnode

sameVnode函數貫穿着整個diff過程，其中首要的必要條件就是key要相等

function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        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)
      )
    )
  )
}
複製代碼

key

衆所周知，key在patch中發揮着相當重要的做用，key能夠在不少狀況下可以有效地減小沒必要要的從新渲染。 當不設置key時，那麼渲染列表數據中的子元素key就是undefined, 顯然undefined === undefined。那麼sameVNode永遠都是相同的(一般狀況下)，同時形成沒必要要的渲染（若是是開頭的demo中不設置key的話將會多形成3次的沒必要要渲染）。

若是設置了key，a.key !== b.key的狀況下就立刻終止了判斷，sameVnode直接返回false，不跟你多bb。
避免用數組的下標做爲key
由於當數組發生變化時，下標也可能會發生變化，這可能致使一些隱蔽的bug。

patch

• 不存在 oldVnode,則進行createElm
• 存在 oldVnode 和 vnode，可是 sameVnode 返回 false, 則進行createElm
• 存在 oldVnode 和 vnode，可是 sameVnode 返回 true, 則進行patchVnode

patchVnode

能夠將Vnode分爲3種：

• 純文本Vnode
• 含Children的Vnode
• 不含Children的Vnode
  
  

因此狀況能夠分紅3*3種

	oldVnode.text	oldCh	!oldCh
vnode.text	setTextContent	setTextContent	setTextContent
ch	addVnodes	updateChildren	addVnodes
!ch	setTextContent	removeVnodes	setTextContent

function patchVnode (oldVnode, vnode, insertedVnodeQueue, ownerArray, index, removeOnly) {
  // 節點相同則直接返回，不做處理
  if (oldVnode === vnode) {
      return
  }
  // ...
  const elm = vnode.elm = oldVnode.elm
  // ...
  const oldCh = oldVnode.children
  const ch = vnode.children
  // ...
  if (isUndef(vnode.text)) {
    if (isDef(oldCh) && isDef(ch)) {
    // 當新老Vnode.length都存在且不相等 進入updateChildren
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    nodeOps.setTextContent(elm, vnode.text)
  }
  // ...
}
複製代碼

updateChildren

insertedVnodeQueue 是維護的一個數組隊列，diff完成後將隊列中的數據逐個更新

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
    // 首首 => 尾尾 => 首尾 => 尾首 => 遍歷old用key查找index替換位置
    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]
      }
    }
    // 跳出while循環 也就是先後指針交錯了
    // 若是是老節點的指針先交錯那就說明是新增了節點 => addVnodes
    // 反之 => removeVnodes
    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)
    }
複製代碼

測試

回到例子，爲了能走更多的狀況，改一下demo。

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
  </div>
  <div>
    ["a", "b", "c", "d", "e", "f", "g"] => ["f", "d", "a", "h", "e", "c", "b", "g"]
  </div>
  <script src="../vue/dist/vue.js"></script>
  <script> const app = new Vue({ el: "#demo", data: { items: ["a", "b", "c", "d", "e", "f", "g"] }, mounted() { setTimeout(() => { this.items = ["f", "d", "a", "h", "e", "c", "b", "g"] }, 2000) } }) </script>
</body>
複製代碼

在vue.js中的updateChildren打下斷點以便觀察。

第一次while

尾尾gg匹配成功

newStartVnode都是g, 進入 patchVnode。 我本來覺得會判斷 if (oldVnode.text !== vnode.text)而後不做處理，結果居然又進去了updateChildren。
不由讓我 console.log("oldStartIdx", oldStartIdx, oldCh[oldStartIdx])

誤區

其中結構爲

我本來覺得這個 VNode.text = a; VNode.children = undefined ...
這個 <p>a</p>中的a仍是一個 VNode...

好在糾正了錯誤，下面就無論那個純text的VNode了。

不會只有我如今才知道吧...

那麼在debugger加個條件以便觀察 oldStartVnode.tag === 'p'

繼續

第二次while

尾首匹配成功，參考節點爲a節點執行nodeOps.insertBefore

abcdefg => fabcdeg

oldStartVnode = oldCh[++oldStartIdx]; newEndVnode = newCh[--newEndIdx];

第三次while

首尾四次匹配都沒有匹配到，進入該代碼塊。

1. 對剩下的oldVnode進行createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)(值見下圖)
2. 若是idxInOld不存在，則代表是new element => createElm
3. 若是idxInOld存在 => oldCh[idxInOld] = undefined => 參考節點爲a節點執行nodeOps.insertBefore
4. 此時界面上也從 fabcdeg => fdabceg

第四次while

首首aa對比成功

第五次while

首尾bb對比成功，參考節點爲g節點執行nodeOps.insertBefore

fdabceg => fdacebg

第六次while

首尾cc對比成功，參考節點爲b節點執行nodeOps.insertBefore

fdacebg => fdaecbg

第七次while

此時的oldStartVnode === undefined => oldStartVnode = oldCh[++oldStartIdx];

第八次while

尾尾ee匹配成功

此時oldEndIdx < oldStartIdx 跳出while，進入下面代碼塊。

oldEndIdx < oldStartIdx => 新增了節點 => 參考節點爲E節點執行addVnodes()(addVnodes執行最終也是nodeOps.insertBefore)，將newCh剩餘的節點（H）依次插入E(下面的refElm)節點以前。

再在debugger中按一次F8就完成了整個diff過程了，如今呈現的就是最終的fdahecbg

參考連接

總結

強烈建議用Chrome瀏覽器進行調試，配合圖簡直不要太好理解

1. 渲染列表的diff關鍵函數updateChildren
2. 注意VNode結構 => <p>a<p> => VNode{tag: 'p', children: VNode{tag: undefined, children: undefined, text: 'a'}, text: undefined}
3. 每一次循環: 首首 => 尾尾 => 首尾 => 尾首 => findIndex => createElm(!idxInOld) | nodeOps.insertBefore(idxInOld)
4. 跳出循環 => addVnodes(oldStartIdx > oldEndIdx) | removeVnodes(newStartIdx > newEndIdx)

最後

我深知本身的理解還不夠透徹，不少棘手的問題還有待研究。但願後面有新的理解能夠持續在本文添加或修改，大佬輕噴，還望不吝賜教。