Vue diffアルゴリズムの完全な分析

Vue.prototype._update = 関数 (vnode: VNode、hydrating?: ブール値) {
  const vm:コンポーネント = this
  定数 prevEl = vm.$el
  定数 prevVnode = vm._vnode
  定数restoreActiveInstance = setActiveInstance(vm)
  vm._vnode = vノード
  // Vue.prototype.__patch__ がエントリポイントに挿入されます
  // 使用されるレンダリング バックエンドに基づきます。
  /*バックエンドレンダリングに基づいて、Vue.prototype.__patch__ がエントリポイントとして使用されます*/
  if (!prevVnode) {
    // 初期レンダリング
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } それ以外 {
    // 更新
    vm.$el = vm.__patch__(前のVnode、vnode)
  }
  アクティブインスタンスを復元する()
  // __vue__ 参照を更新
  /*新しいインスタンスオブジェクトの__vue__を更新します*/
  if (前El) {
    prevEl.__vue__ = null
  }
  （vm.$el）の場合{
    vm.$el.__vue__ = vm
  }
  // 親が HOC の場合は、その $el も更新します
  (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) の場合 {
    vm.$parent.$el = vm.$el
  }
  // 更新されたフックは、子が確実に実行されるようにスケジューラによって呼び出されます。
  // 親の更新フックで更新されました。
}

関数 patch (oldVnode, vnode, hydrating, removeOnly) を返す {
  /*vnode が存在しない場合は、ノードを削除するために破壊フックを呼び出します*/
  （vnodeが未定義の場合）{
    if (isDef(oldVnode)) は、invokeDestroyHook(oldVnode) を実行します。
    戻る
  }

  isInitialPatch = false とします
  const 挿入VnodeQueue = []

  /*oldVnode が存在しない場合は、新しいノードを直接作成します*/
  if (isUndef(oldVnode)) {
    // 空のマウント（おそらくコンポーネント）、新しいルート要素を作成する
    isInitialPatch = true
    createElm(vnode、挿入されたVnodeQueue)
  } それ以外 {
    /*古い VNode に nodeType があるかどうかをマークします*/
    定数 isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // 既存のルートノードにパッチを適用する
      /*同じノードの場合は、既存のノードを直接変更します*/
      patchVnode(古いVnode、vnode、挿入されたVnodeQueue、null、null、removeOnly)
    } それ以外 {
      実要素の場合
        // 実際の要素にマウントする
        // これがサーバー側でレンダリングされたコンテンツであるかどうか、また実行できるかどうかを確認します
        // 水分補給は成功しました。
        oldVnode.nodeType === 1 の場合 && oldVnode.hasAttribute(SSR_ATTR) {
          /*古い VNode がサーバーレンダリング要素である場合、hydrating は true に設定されます*/
          古いVnode.removeAttribute(SSR_ATTR)
          保湿 = 本当
        }
        if (isTrue(水分補給)) {
          /*実際のDomにマージする必要があります*/
          if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
            /*挿入フックを呼び出す*/
            挿入フックを呼び出します(vnode、挿入されたVnodeQueue、true)
            古いVnodeを返す
          } そうでない場合 (process.env.NODE_ENV !== 'production') {
            警告(
              「クライアント側でレンダリングされた仮想DOMツリーが一致しません」+
              'サーバーレンダリングされたコンテンツ。これはおそらく不正な' +
              'HTML マークアップ、たとえばブロックレベル要素を ' + 内にネストする
              '<p>、または欠落している<tbody>。水分補給を中止し、' + を実行します。
              「完全なクライアント側レンダリング。」
            ）
          }
        }
        // サーバー側でレンダリングされていないか、ハイドレーションに失敗しました。
        // 空のノードを作成して置き換える
        /*サーバー側レンダリングでない場合、または実際のDOMへのマージに失敗した場合は、空のVNodeノードを作成して置き換えます*/
        古いVnode = 空のノードAt(古いVnode)
      }

      // 既存の要素を置き換える
      /*既存の要素を置き換える*/
      定数 oldElm = oldVnode.elm
      定数 parentElm = nodeOps.parentNode(oldElm)

      // 新しいノードを作成する
      エルムを作成します(
        vノード、
        挿入されたVnodeQueue、
        // 極めて稀なエッジケース: 古い要素が
        // 遷移を終了します。遷移 + を組み合わせた場合にのみ発生します。
        // キープアライブ + HOC。(#4590)
        oldElm._leaveCb ? null : parentElm、
        nodeOps.nextSibling(古いElm)
      ）

      // 親プレースホルダーノード要素を再帰的に更新する
      （vnode.parent が定義されていない場合）
        /*コンポーネントのルートノードが置き換えられ、親ノード要素をトラバースして更新されます*/
        祖先 = vnode.parent とする
        const パッチ可能 = isPatchable(vnode)
        （祖先）{
          (i = 0 とします; i < cbs.destroy.length; ++i) {
            cbs.destroy[i](祖先)
          }
          祖先.elm = vnode.elm
          if (パッチ可能) {
            /*作成コールバックを呼び出す*/
            (i = 0 とします; i < cbs.create.length; ++i) {
              cbs.create[i](空のノード、祖先)
            }
            //#6513
            // 作成フックによってマージされた可能性のある挿入フックを呼び出します。
            // たとえば、「挿入」フックを使用するディレクティブの場合。
            const 挿入 = ancestor.data.hook.insert
            if (挿入.マージ) {
              // コンポーネントマウントフックの再呼び出しを避けるためにインデックス1から開始します
              (i = 1 とします; i < insert.fns.length; i++) {
                挿入.fns[i]()
              }
            }
          } それ以外 {
            registerRef(祖先)
          }
          祖先 = 祖先.親
        }
      }

      // 古いノードを破棄する
      if (isDef(parentElm)) {
        /*古いノードを削除*/
        削除Vnodes([古いVnode], 0, 0)
      } そうでない場合 (isDef(oldVnode.tag)) {
        /*破棄フックを呼び出す*/
        呼び出しDestroyHook(古いVnode)
      }
    }
  }

  /*挿入フックを呼び出す*/
  挿入フックを呼び出します(vnode、挿入されたVnodeQueue、isInitialPatch)
  vnode.elmを返す
}

/*
  2 つの VNode ノードが同じノードであるかどうかを判断するには、次の条件を満たす必要があります。キーが同じである、タグ (現在のノードのラベル名) が同じである、isComment (コメント ノードであるかどうか) が同じである、データ (現在のノードに対応するオブジェクトで、特定のデータ情報が含まれている、VNodeData 型である、VNodeData 型でデータ情報を参照できる) が定義されているかどうか、タグが <input> の場合、型が同じである必要があります*/
関数sameVnode(a, b) {
  戻る （
    a.キー === b.キー && (
      （
        a.タグ === b.タグ &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        同じ入力タイプ(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      ）
    ）
  ）
}

// 一部のブラウザは <input> の動的変更をサポートしていません
// したがって、それらは異なるノードとして扱う必要がある
/*
  タグが <input> の場合、タイプが同じかどうかを判断します。一部のブラウザは <input> タイプの動的な変更をサポートしていないため、異なるタイプとみなされます*/
関数sameInputType(a, b) {
  if (a.tag !== 'input') は true を返します
  私は
  定数 typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
  定数 typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
  戻り値 typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}

 // diffアルゴリズムはノードを比較します function patchVnode (
  古いVノード、
  vノード、
  挿入されたVnodeQueue、
  所有者配列、
  索引、
  削除のみ
）{
  /* 2 つの VNode ノードが同じ場合は直接返します */
  (oldVnode === vnode)の場合{
    戻る
  }

  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 が複製された場合にのみこれを実行することに注意してください -
  // 新しいノードが複製されていない場合は、レンダリング関数が
  // ホットリロード API によってリセットされ、適切な再レンダリングを行う必要があります。
  /*
    古いVNodeと新しいVNodeの両方が静的であり、キーが同じ（同じノードを表す）場合、
    そして、新しいVNodeは複製されるか、一度だけマークされます（v-once属性でマークされ、一度だけレンダリングされます）。
    次に、elm と componentInstance を置き換えるだけです。
  */
  if (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === 古いVnode.key &&
    (vnode.isCloned が True の場合 || vnode.isOnce が True の場合)
  ）{
    vnode.componentInstance = 古いVnode.componentInstance
    戻る
  }

  // いくつかのコンポーネントフックを実行します/*data.hook.prepatch が存在する場合は、最初にそれを実行します*/
  私は
  定数データ = vnode.data
  isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch) の場合
    /*i = data.hook.prepatch、存在する場合は、「./create-component componentVNodeHooks」を参照してください。 */
    i(古いVノード、vノード)
  }

  // 古いノードと新しいノードに子があるかどうかを確認します const oldCh = oldVnode.children
  定数ch = vnode.children

  // プロパティ更新 if (isDef(data) && isPatchable(vnode)) {
    // cbs 内の属性更新の配列を取り出します [attrFn, classFn,​​ ​​...]
    /*更新コールバックと更新フックを呼び出す*/
    (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)) {
      /*古いノードと新しいノードの両方に子ノードがある場合は、子ノードに対して diff 操作を実行し、updateChildren を呼び出します*/
      oldCh !== ch の場合、elm の子を更新します。oldCh の子は ch の子であり、insertedVnodeQueue の子は ch の子であり、removeOnly の子は elm の子です。
    } そうでなければ (isDef(ch)) {
      /*古いノードに子ノードがなく、新しいノードに子ノードがある場合は、まずelmのテキストコンテンツをクリアし、次に現在のノードに子ノードを追加します*/
      process.env.NODE_ENV !== 'production' の場合 {
        重複キーのチェック(ch)
      }
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, 挿入されたVnodeQueue)
    } そうでなければ (isDef(oldCh)) {
      /*新しいノードに子ノードがなく、古いノードに子ノードがある場合は、ele のすべての子ノードを削除します*/
      Vnodesを削除します(oldCh, 0, oldCh.length - 1)
    } そうでない場合 (isDef(oldVnode.text)) {
      /*新しいノードと古いノードの両方に子ノードがない場合、テキストのみが置き換えられます。このロジックでは新しいノードのテキストが存在しないため、ele のテキストは直接削除されます*/
      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)
  }
}

/*
  diff コアメソッド、比較最適化*/
関数 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)) {
      /*最初の 4 つのケースは、実際にはキーが指定されている場合で、同じ VNode であると判断された場合は、Vnode を直接パッチし、それぞれ oldCh と newCh の 2 つのヘッド ノードを比較します (2*2=4 ケース)*/
      パッチ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]
    } それ以外 {
      /*
        古い VNode のキーに対応するキーを持つハッシュ テーブルを生成します (undefined が初めて入ったときにのみ生成され、後で重複するキー値を検出するための道も開かれます)
        たとえば、childre は次のようになります [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}] beginIdx = 0 endIdx = 2  
        結果は{key0: 0、key1: 1、key2: 2}です。
      */
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)

      /*新しい VNode ノード newStartVnode にキーがあり、このキーが oldVnode で見つかる場合は、このノードの idxInOld (つまり、ノード番号、添え字) を返します*/
      idxInOld = isDef(newStartVnode.key)
        ? 古いキーからIdx[新しい開始Vノード.キー]
        : findIdxInOld(新しい開始ノード、古いCh、古い開始Idx、古い終了Idx)
      if (isUndef(idxInOld)) { // 新しい要素
        /*NewStartVnode にキーがないか、古いノードにキーが見つからないため、新しいノードを作成します*/
        createElm(newStartVnode、insertedVnodeQueue、parentElm、oldStartVnode.elm、false、newCh、newStartIdx)
      } それ以外 {
        /*同じキーを持つ古いノードを取得します*/
        vnodeToMove = 古いCh[idxInOld]
        同じVnode(vnodeToMove, newStartVnode)の場合
          /*新しい VNode と同じキーを持つ取得されたノードが同じ VNode である場合は、Vnode にパッチを適用します*/
          パッチVnode(vnodeToMove、newStartVnode、insertedVnodeQueue、newCh、newStartIdx)
          /* patchVnode が入力されているため、古いノードには undefined が割り当てられます。このノードと同じキーを持つ新しいノードがある場合は、重複キーがあることが検出され、プロンプトが表示されます*/
          oldCh[idxInOld] = 未定義
          /*canMoveフラグがある場合、oldStartVnodeに対応する実際のDomノードの前に直接挿入できます*/
          canMove && nodeOps.insertBefore(親Elm、vnodeToMove.elm、oldStartVnode.elm)
        } それ以外 {
          // 同じキーだが要素が異なる。新しい要素として扱う
          /*新しい VNode が同じキーを持つ VNode と同じ VNode でない場合 (たとえば、タグが異なるか、入力タグのタイプが異なる場合)、新しいノードを作成します */
          createElm(newStartVnode、insertedVnodeQueue、parentElm、oldStartVnode.elm、false、newCh、newStartIdx)
        }
      }
      新しい開始Vノード = 新しいCh[++新しい開始Idx]
    }
  }
  （古い開始ID＞古い終了ID）の場合{
    /*すべての比較が完了した後、oldStartIdx > oldEndIdx の場合、古いノードが走査され、新しいノードが古いノードよりも多いことを意味します。そのため、追加の新しいノードを 1 つずつ作成して、実際の Dom に追加する必要があります */
    refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
    Vnodesを追加します(parentElm、refElm、newCh、newStartIdx、newEndIdx、insertedVnodeQueue)
  } そうでない場合 (newStartIdx > newEndIdx) {
    /*すべての比較が完了した後、newStartIdx > newEndIdx の場合、新しいノードがトラバースされ、新しいノードよりも古いノードの数が多いことを意味します。この時点で、冗長な古いノードを実際の Dom から削除する必要があります。*/
    Vnodes を削除します (古い Ch、古い開始 ID、古い終了 ID)
  }
}

  if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnodeが左に移動されました
  }

  そうでない場合 (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
  } 

  そうでない場合 (sameVnode(oldStartVnode, newStartVnode)) {
    パッチVnode(古い開始Vnode、新しい開始Vnode、挿入されたVnodeQueue)
    古い開始Vノード = 古いCh[++古い開始Idx]
    新しい開始Vノード = 新しいCh[++新しい開始Idx]
  }

  そうでない場合 (sameVnode(oldEndVnode, newEndVnode)) {
    パッチVnode(古いEndVnode、新しいEndVnode、挿入されたVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
  } 

  else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnodeが右に移動
    パッチVnode(古い開始Vnode、新しい終了Vnode、挿入されたVnodeQueue)
    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)
    canMove && nodeOps.insertBefore(親Elm、古い終了Vnode.elm、古い開始Vnode.elm)
    oldEndVnode = oldCh[--oldEndIdx]
    新しい開始Vノード = 新しいCh[++新しい開始Idx]
  }

if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
関数createKeyToOldIdx (children, beginIdx, endIdx) {
  let i、キー
  定数マップ = {}
  (i = beginIdx; i <= endIdx; ++i) の場合 {
    キー = children[i].key
    if (isDef(key)) map[key] = i
  }
  戻る地図
}

  idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null

  if (isUndef(idxInOld)) { // 新しい要素
    createElm(新しい開始Vnode、挿入されたVnodeQueue、親Elm、古い開始Vnode.elm)
    新しい開始Vノード = 新しいCh[++新しい開始Idx]
  } 

  elmToMove = 古いCh[idxInOld]
  同じVnode(elmToMove, newStartVnode)の場合
    パッチVnode(elmToMove、newStartVnode、insertedVnodeQueue)
    oldCh[idxInOld] = 未定義
    canMove && nodeOps.insertBefore(親Elm、新しいStartVnode.elm、古いStartVnode.elm)
    新しい開始Vノード = 新しいCh[++新しい開始Idx]
  } それ以外 {
    // 同じキーだが要素が異なる。新しい要素として扱う
    createElm(新しい開始Vnode、挿入されたVnodeQueue、親Elm、古い開始Vnode.elm)
    新しい開始Vノード = 新しいCh[++新しい開始Idx]
  }