VUE v-for の :key の詳細な説明

v-for タグにキーが追加されていない場合。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <script src="../../js/vue.js"></script>
  <title>v-for キーについて</title>
</head>
<本文>
  <div id="アプリ">
    <div>
      <input type="text" v-model="名前">
      <button @click="add">追加</button>
    </div>
    <ul>
      <li v-for="(リスト内の項目、インデックス)">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    constアプリ = 新しいVue({
      el: '#app',
      データ（） {
        戻る {
          名前： ''、
          新しいID: 3,
          リスト: [
            { id: 1, name: '张三' },
            { id: 2, 名前: 'Li Si' },
            { id: 3、名前: '王五' }
          ]、
        };
      },
      計算: {
      },
      メソッド: {
        追加（） {
          //これはunshiftであることに注意してください
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      },
    });
  </スクリプト>
  <スタイルスコープ>
  </スタイル>
</本文>
</html>

李斯を選択して趙柳を加えた後、選択された人物は張三になりました。

ここに画像の説明を挿入

v-for にキーがある場合を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <script src="../../js/vue.js"></script>
  <title>v-for キーについて</title>
</head>
<本文>
  <div id="アプリ">
    <div>
      <input type="text" v-model="名前">
      <button @click="add">追加</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>
  </div>
  <script type="text/javascript">
    constアプリ = 新しいVue({
      el: '#app',
      データ（） {
        戻る {
          名前： ''、
          新しいID: 3,
          リスト: [
            { id: 1, name: '张三' },
            { id: 2, 名前: 'Li Si' },
            { id: 3、名前: '王五' }
          ]、
        };
      },
      計算: {
      },
      メソッド: {
        追加（） {
          //これはunshiftであることに注意してください
          this.list.unshift({ id: ++this.newId, name: this.name })
          this.name = ''
        }
      },
    });
  </スクリプト>
  <スタイルスコープ>
  </スタイル>
</本文>
</html>

ここに画像の説明を挿入

Li Si を選択して Zhao Liu を追加した後、選択された人物は依然として Li Si であり、変更はありません。

これは、Vue の下部にある Diff アルゴリズムによるものです。 diff アルゴリズムの処理方法は、次の図に示すように、操作の前後で DOM ツリーの同じレベルにあるノードをレイヤーごとに比較することです。

ここに画像の説明を挿入

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

たとえば、次のような状況を考えてみましょう。

ここに画像の説明を挿入

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

ここに画像の説明を挿入

つまり、C を F に、D を C に、E を D に更新し、最後に E を挿入します。これは非効率的ではありませんか?

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

ここに画像の説明を挿入

vue のリストループには、key = "一意の識別子" を追加する必要があります。一意の識別子は、アイテム内の id インデックスなどになります。vue コンポーネントは再利用性が高いため、Key を追加するとコンポーネントの一意性を識別できます。各コンポーネントをより適切に区別するために、キーの主な機能は、仮想 DOM を効率的に更新することです。