v-for における key 属性の役割を見てみましょう。

関連する推奨事項: 「vue.js チュートリアル 」

実際には、vue だけではなく、react は、次の場合にも各項目を要求します。リストレンダリングを実行する 各コンポーネントに key 属性を追加します。

キーの役割を説明するには、まず仮想 DOM の Diff アルゴリズムを紹介する必要があります。

vue と React は両方とも一連の仮想 DOM を実装しているため、DOM 要素を直接操作せずにデータのみを操作してページを再レンダリングできることがわかっています。その背後に隠された原理は、効率的な Diff アルゴリズムです。

vue と React の仮想 DOM の Diff アルゴリズムはほぼ同じです。その核心は 2 つの単純な仮定に基づいています:

• 2 つの同一のコンポーネントは類似した DOM 構造を生成しますが、異なります。コンポーネントはさまざまな DOM 構造を生成します。

• 同じレベルにあるノードのグループ。一意の ID で区別できます。

上記の 2 つの仮定に基づいて、仮想 DOM Diff アルゴリズムの複雑さは O(n^3) から O(n) に軽減されます。

ここでは、React の差分アルゴリズムから画像を借りて簡単に説明します:

ページ上のデータが変更されると、Diff アルゴリズムは同じレベルのみを比較します。 :

ノード タイプが異なる場合は、前のノードを直接強制終了し、新しいノードを作成して挿入します。このノードの後続の子ノードは比較されません。

ノードの種類が同じ場合、ノードの属性がリセットされ、ノードの更新が行われます。

特定の層に同一のノード、つまりリスト ノードが多数ある場合、Diff アルゴリズムの更新プロセスもデフォルトで上記の原則に従います。

たとえば、次の状況では:

B と C の間に F を追加したいと考えています。 Diff アルゴリズムのデフォルトの実行は次のとおりです:

つまり、C を F に、D を C に、E を D に更新し、最後に E を挿入することになります。非常に非効率ではないでしょうか。

したがって、キーを使用して各ノードを一意に識別する必要があります。Diff アルゴリズムはこのノードを正しく識別し、新しいノードを挿入するための正しい場所を見つけることができます。

つまり、キーの主な役割は、仮想 DOM を効率的に更新することです。また、Vue で同じタグ名の要素のトランジション切り替えを使用する場合、key 属性も使用され、Vue がそれらを区別できるようにする目的もあります。属性を変更し、トランジションをトリガーしません。

プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 ！

以上がv-for における key 属性の役割を見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。