v-for で key を使用する理由は次のとおりです。
キーは文字列または数値のみです。
キーは唯一の
キーである必要があります: 機能: 再配置効率とインプレース多重化の向上
- キーはリスト内の各要素の一意性を識別できるため、Vue が仮想 DOM を効率的に更新するのに便利です。
- キーは主に dom diff アルゴリズムで使用されます。diff アルゴリズムはピア比較であり、キーと現在のタグのタグ名を比較します。それらが同じ場合、要素のみが移動され、再作成されません。削除されました。
- キーがない場合、Vue は「インプレース多重化」戦略を使用します。データ項目の順序が変更された場合、Vue はデータ項目の変更に合わせて DOM 要素を移動せず、単に各要素を再利用します。元の位置。
- データの追加や削除によりインデックスが変化し、キーが無効になるため、インデックス値インデックスをキーとして使用しないでください1。データには ID などの一意の識別を使用することをお勧めします。
v-for で key を使用する例を次に示します。
<ul>
<li v-for="item in items" :key="item.id">
{
{ item.name }}
</li>
</ul>
ここでは、一意であるため item.id をキーとして使用しました。このようにして、項目配列が変更されると、Vue はリスト全体を再レンダリングするのではなく、キーに従って対応する要素を正しく更新および移動できます。