Vueにおけるkey属性

Vueがv-forディレクティブでレンダリングされた要素のリストを更新する際、デフォルトでは「その場更新」戦略が使用されます。配列やオブジェクトの要素の順序が変更された場合、VueはDOM要素を移動させず、単に各要素を「その場で」更新して、対応するインデックスの新しいデータを表示します。

Vueに各要素の同一性を判断する方法を指示し、それによって既存の要素の再利用と順序変更を可能にするには、各要素に一意のkey属性を指定する必要があります。

キーがない場合、Vueは要素の移動を最小限に抑え、可能な限り同じタイプの要素を変更/再利用するアルゴリズムを使用します。キーを使用すると、要素はキーの順序の変更に応じて並べ替えられ、キーがなくなった要素は常に削除/破棄されます。

DOMの反復処理内容が単純な場合、またはパフォーマンス向上のために意図的にデフォルトの更新戦略に依存する場合を除き、v-forと一緒にkey属性を常に指定することが推奨されます。

一般に、キーを追加する問題は、オブジェクトの配列を反復処理する際に発生します。この場合、オブジェクトのキーの1つは、例えばidのような一意のフィールドです：

javascriptdata() {
  return {
    users: [
      {
        id: 1,
        name: 'name1',
        surn: 'surn1',
      },
      {
        id: 2,
        name: 'name2',
        surn: 'surn2',
      },
      {
        id: 3,
        name: 'name3',
        surn: 'surn3',
      },
    ]
  }
}

対応するキーを指定して、提供された配列をループで反復処理してみましょう：

html<template>
  <p v-for="user in users" :key="user.id">
    {{ user.name }}
    {{ user.surn }}
  </p>
</template>

javascriptdata() {
  return {
    products: [
      {
        id: 1,
        name: 'product1',
      },
      {
        id: 2,
        name: 'product2',
      },
      {
        id: 3,
        name: 'product3',
      },
    ]
  }
}