vue のキーを詳細に分析して、キーが何に使用できるかを確認します。

キーの用途は何ですか?次の記事では、vue のキーを詳細に分析し、キーが何に使用できるかを確認します。皆さんのお役に立てれば幸いです。

vue のキーの詳細な分析

キーの用途は何ですか?

• 公式を見てみましょう最初に説明します:
  • key 属性は主に vue の 仮想 DOM アルゴリズム (diff アルゴリズム) で使用され、VNodes## を比較するときに新しいノードと古いノードを識別する場合には使用されません。
  • # key、Vue は動的要素を最小限に抑えるアルゴリズムを使用し、同じタイプの要素を可能な限り所定の場所で変更/再利用しようとします
  キー
  • を使用すると、キーの変更に基づいて要素の順序が並べ替えられます、存在しないキーを持つ要素を削除/破棄します
  このような曖昧な概念に直面しても、焦らずに一度読んで印象を掴んでください。次に、キーがどのように使用されているかを段階的に詳しく分析していきます。のために。 [関連する推奨事項: "
vue.js チュートリアル

"]

1 vnode 仮想ノード

#vnode: 仮想ノード、仮想ノード

DOM ツリーの要素をまだ覚えていますか? ドキュメント、要素、ノード

仮想ノードとは何ですか? 簡単に言えば、ページ上で vue によってレンダリングされるノードは仮想ノードです

  <template id="my-app">
    <div class="title" style="font-size: 30px; color: red;">哈哈哈</div>
  </template>

ここでの div は仮想ノードであり、vue ではこの形式で存在します

    const vnode = {
      type: "div",
      props: {
        class: "title",
        style: {
          "font-size": "30px",
          color: "red",
        },
      },
      children: "哈哈哈",
    };

理解できないのは、children 属性かもしれません。div には子要素がないので、値は「ははは」だけです。子要素がある場合は、最後のノードまで人形をネストし続けます。 . 、

      children: [
        {
          // 子元素
        },
        {
          // 子元素
        }
      ],

2 のような vDOM 仮想 DOM

は実際の DOM と同じです。実際のノードがある場合は、実際の DOM も存在します。 DOM. そして、仮想ノードが存在する場合は、仮想 DOM が存在しますもちろん、仮想 DOM ツリーにも同様のことが当てはまります。VNode ツリーもあります。つまり、心配する必要はありません。おそらく次のとおりです。

  <template id="my-app">
    <div>
      <div>
        <p></p>
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </template>

Convert to a virtual DOM Tree:

仮想 DOM が実際の DOM にレンダリングされると、これにはコンポーネントが関係しますが、これについては後で機会があればお話します

##3 レンダリング プロセス

##4 ケース: f

を挿入します。前の内容を理解したら、本題に取り掛かりましょう。必要なケースは 1 つだけです。キーの役割を十分に理解してください。 から始めましょう (キーを追加せずに) 最初にこの単純なケースを見てみましょう

    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>

      data() {
        return {
          letters: ['a', 'b', 'c', 'd']
        }
      },
      methods: {
        insertF() {
          this.letters.splice(2, 0, 'f');
        }
      },

この質問の目的は、f# を挿入することであることがわかります。 ## ab と cd の間。この単純なケースを理解した後、これを実際の DOM に挿入する方法はないか考え始めました。何ですか?

次の 3 つのタイプがあります:

方法 1 (通常の方法)

手順: 以前の dom を直接削除し、新しい vnode で再レンダリングします

方法 2 (キーなしの差分アルゴリズム)

注: これは、キーがない場合の vue のデフォルトの差分アルゴリズムです。対応するソース コードVue は判定文を通してキーを持ってきたかどうかを判定します

以下はキーがない場合の状況です。 key

次に、

patchUnkeyedChildren()

をチェックすると、差分アルゴリズムの実行プロセスを表示できます

簡単な説明を次に示します。

古い vnode と新しい vnode を取得します

2 つの配列のうちどちらの長さが短いかを判断します (小さい方を使用します)。配列によって配列が範囲外になることはありません)

• 図で説明したようにパッチ適用を開始し、(新しい vnode の c に) スペースがなくなるまでパッチ適用を続けます。

• 古い vnode

• #古い vnode > 新しい vnode の場合、古い vnode ノードをアンインストールします

  • サイクルを終了

  • #方法 3 (キーによる差分アルゴリズム)
• ##同様に、方法 2 の手順に従ってこれを表示できます

  patchKeyedChildren()

  Method

このメソッドは本質であり、複雑になり始めます

相違点が見つかったときに最初からパッチを適用します (ここでは、c !== f)、ブレーク

末尾からパッチし、異なることが判明した場合 (ここでは c !== f)、ブレーク

これまで、a、b、c、d have は実際の DOM にレンダリングされます。唯一の違いは f です。判断するために f

を探し始めましょう。古い vnode

• #新しい vnode > 古い vnode の場合は、古い vnode の冗長ノードをアンインストールします

• 新しい vnode = 古い vnode の場合、これは非常に複雑です。順序に関係なく、その中の同じ項目にパッチを適用してから、アンインストールおよびマウント操作を実行してください。

• 概要: この時点で、訴訟プロセス全体が完全に完了しました。著者はこれを理解することしかできません。この記事は、coderwhy のビデオと私自身の考えの一部を組み合わせたものです (ビデオ ソース: https://ke.qq) .com/course /3453141) なので、何か間違っている可能性があります。皆さんも私を批判したり修正したりしてください。

[関連する推奨事項: "

vue.js チュートリアル "]

以上がvue のキーを詳細に分析して、キーが何に使用できるかを確認します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。