前言

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

從一個簡單的demo切入： p標簽渲染一個items陣列

<div id="demo">
    <p v-for="item in items" :key="item">{{ item }}</p>
</div>
<script src=https://www.cnblogs.com/chengxuyuanaa/p/"../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的核心方法
   5.學習要結合實戰一起練習的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

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種

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=https://www.cnblogs.com/chengxuyuanaa/p/"../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匹配成功

誤區

其中結構為

不會只有我現在才知道吧...

那么在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)

最后
注意：學習要結合實戰一起練習的，在此贈送2020最新企業級 Vue3.0/Js/ES6/TS/React/node等實戰視頻教程，想學的可進裙 519293536 免費獲取，小白勿進哦！

本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

標籤：JavaScript

上一篇：移動UI系列 - 簡單地使用半衰期演算法來預測手勢的滑動方向與速度

下一篇：Google VS 百度