vue の for ループでキーを追加する必要があるのはなぜですか?

Vue では、リスト ループ内の各項目に一意のキーを指定することが重要です。 Key は、Vue がリスト項目への変更を追跡するのに役立ち、それによってレンダリングの効率とパフォーマンスが向上します。これは一意で安定している必要があり、for ループの :key 属性を介して追加されます。キーを指定しない場合、Vue はインデックスをデフォルトのキーとして使用するため、パフォーマンスの問題が発生する可能性があります。

Vue の for ループのキー

Vue では、リストまたは配列の反復の場合、各リスト項目には一意のキー属性が割り当てられます。このキーは、Vue を効率的にレンダリングするために重要です。

キーが必要な理由

キーは、Vue がリスト項目への変更を追跡するのに役立ちます。リスト項目が変更されると (追加、削除、並べ替えなど)、Vue はキーを使用して変更された特定の項目を識別します。これにより、Vue は必要な要素のみを更新できるようになり、レンダリングの効率とパフォーマンスが向上します。

キーの要件

• 一意性: キーはリスト内の各項目に対して一意である必要があります。
• 安定性: key は時間の経過とともに変更されるべきではありません。そうしないと、Vue はそれを新しい項目であると認識し、リスト全体を再レンダリングします。
• シンプルさ: item.id や item.index などの単純な値をキーとして使用します。複雑な式はレンダリングのパフォーマンスに影響を与える可能性があります。

キーの追加

Vue の for ループにキーを追加するのは非常に簡単です:

<code><ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul></code>

はキーではありません

for ループでキーを指定しない場合、Vue はリスト項目のインデックスをデフォルトのキーとして使用します。リスト項目の並べ替えや追加/削除が行われると、Vue がリスト全体を再レンダリングするため、これによりパフォーマンスの問題が発生する可能性があります。

ベスト プラクティス

• for ループでは常に key を使用します。
• 単純で安定した値をキーとして使用します。
• Math.random() などの非決定的な値をキーとして使用することは避けてください。

以上がvue の for ループでキーを追加する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。