Vueのdiffアルゴリズムについての簡単な説明

<div>
   <p>1234</p>
   <div>
       <span>1111</span>
   </div>
</div>

 var Vnode = {
     タグ: 'div',
     子供たち： [
         {
             タグ: 'p',
             テキスト: '1234'
         },
         {
             タグ: 'div',
             子供たち：[
                 {
                     タグ: 'span',
                     テキスト: '1111'
                 }
             ]
         }
     ]
 }

// いくつかのパラメータを渡します。oldVnode は古いノード、vnode は新しいノード、readOnly は読み取り専用ノードかどうかを表します。関数 patchVnode (
    古いVノード、
    vノード、
    挿入されたVnodeQueue、
    所有者配列、
    索引、
    削除のみ
  ）{
    if (oldVnode === vnode) { //古いノードと新しいノードが一致している場合は比較は不要です。 return return
    }

    if (isDef(vnode.elm) && isDef(ownerArray)) {   
      // 再利用された vnode を複製する
      vnode = ownerArray[インデックス] = cloneVNode(vnode)
    }

    const elm = vnode.elm = 古いVnode.elm

    if (isTrue(oldVnode.isAsyncPlaceholder)) {
      （vnode.asyncFactory.resolved がisDefである）場合
        水和物(古いVnode.elm、vnode、挿入されたVnodeQueue)
      } それ以外 {
        vnode.isAsyncPlaceholder = true
      }
      戻る
    }

    // 静的ツリーの要素を再利用します // vnode が複製された場合にのみこれを実行します // 新しいノードが複製されていない場合は、レンダリング関数が複製されたことを意味します // hot-reload-api を介してリセットし、適切な再レンダリングを行う必要があります。
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === 古いVnode.key &&
      (vnode.isCloned が True の場合 || vnode.isOnce が True の場合)
    ）{
      vnode.componentInstance = 古いVnode.componentInstance
      戻る
    }

    私は
    定数データ = vnode.data
    isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch) の場合
      i(古いVノード、vノード)
    }

    定数 oldCh = oldVnode.children
    定数ch = vnode.children
    if (isDef(data) && isPatchable(vnode)) {
      (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)) {
      isDef(oldCh) と isDef(ch) のどちらが正しいか
        oldCh !== ch の場合、elm の子を更新します。oldCh の子は ch の子であり、insertedVnodeQueue の子は ch の子であり、removeOnly の子は elm の子です。
      } そうでなければ (isDef(ch)) {
        process.env.NODE_ENV !== 'production' の場合 {
          重複キーのチェック(ch)
        }
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, 挿入されたVnodeQueue)
      } そうでなければ (isDef(oldCh)) {
        Vnodesを削除します(oldCh, 0, oldCh.length - 1)
      } そうでない場合 (isDef(oldVnode.text)) {
        nodeOps.setTextContent(elm, '')
      }
    } そうでない場合 (oldVnode.text !== vnode.text) {
      nodeOps.setTextContent(elm、vnode.text) は、
    }
    if (isDef(データ)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
    }
  }

関数 updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    oldStartIdx = 0 とする
    newStartIdx = 0 とします
    oldEndIdx = oldCh.length - 1 とします。
    oldStartVnode = oldCh[0]とする
    oldEndVnode = oldCh[oldEndIdx]とする
    newEndIdx = newCh.length - 1 とします。
    newStartVnode = newCh[0]とする
    newEndVnode = newCh[newEndIdx]とします。
    oldKeyToIdx、idxInOld、vnodeToMove、refElm を使用します。

    // removeOnly は <transition-group> でのみ使用される特別なフラグです
    // 削除された要素が正しい相対位置に留まるようにする
    // 退出遷移中
    const canMove = !removeOnly

    process.env.NODE_ENV !== 'production' の場合 {
      重複キーのチェック(newCh)
    }

    (古い開始Idx <= 古い終了Idx && 新しい開始Idx <= 新しい終了Idx) {
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnodeが左に移動されました
      } そうでない場合 (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } そうでない場合 (sameVnode(oldStartVnode, newStartVnode)) {
        パッチVnode(古い開始Vnode、新しい開始Vnode、挿入されたVnodeQueue、新しいCh、新しい開始Idx)
        古い開始Vノード = 古いCh[++古い開始Idx]
        新しい開始Vノード = 新しいCh[++新しい開始Idx]
      } そうでない場合 (sameVnode(oldEndVnode, newEndVnode)) {
        パッチVnode(古い終了Vnode、新しい終了Vnode、挿入されたVnodeQueue、新しいCh、新しい終了Idx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnodeが右に移動
        パッチVnode(古い開始Vnode、新しい終了Vnode、挿入されたVnodeQueue、新しいCh、新しい終了Idx)
        canMove && nodeOps.insertBefore(親Elm、oldStartVnode.elm、nodeOps.nextSibling(oldEndVnode.elm))
        古い開始Vノード = 古いCh[++古い開始Idx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnodeが左に移動
        パッチVnode(古い終了Vnode、新しい開始Vnode、挿入されたVnodeQueue、新しいCh、新しい開始Idx)
        canMove && nodeOps.insertBefore(親Elm、古い終了Vnode.elm、古い開始Vnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        新しい開始Vノード = 新しいCh[++新しい開始Idx]
      } それ以外 {
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? 古いキーからIdx[新しい開始Vノード.キー]
          : findIdxInOld(新しい開始ノード、古いCh、古い開始Idx、古い終了Idx)
        if (isUndef(idxInOld)) { // 新しい要素
          createElm(newStartVnode、insertedVnodeQueue、parentElm、oldStartVnode.elm、false、newCh、newStartIdx)
        } それ以外 {
          vnodeToMove = 古いCh[idxInOld]
          同じVnode(vnodeToMove, newStartVnode)の場合
            パッチVnode(vnodeToMove、newStartVnode、insertedVnodeQueue、newCh、newStartIdx)
            oldCh[idxInOld] = 未定義
            canMove && nodeOps.insertBefore(親Elm、vnodeToMove.elm、oldStartVnode.elm)
          } それ以外 {
            // 同じキーだが要素が異なる。新しい要素として扱う
            createElm(newStartVnode、insertedVnodeQueue、parentElm、oldStartVnode.elm、false、newCh、newStartIdx)
          }
        }
        新しい開始Vノード = 新しいCh[++新しい開始Idx]
      }
    }
    （古い開始ID＞古い終了ID）の場合{
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      Vnodesを追加します(parentElm、refElm、newCh、newStartIdx、newEndIdx、insertedVnodeQueue)
    } そうでない場合 (newStartIdx > newEndIdx) {
      Vnodes を削除します (古い Ch、古い開始 ID、古い終了 ID)
    }
  }