Vue 開発者としては、v-for ディレクティブを使用して Vue でリストをレンダリングする場合、各子にそのディレクティブを含める必要があることを誰もが知っています。 key 属性を追加します。この key 属性は、各ノードの一意性を識別するために使用される特別な属性です。 Vue2.x バージョンの key と Vue3.x バージョンの key には大きな違いがあるため、このブログではでは、Vue2 の key と Vue3 の key の違いについて説明します。
Vue2.x バージョンでは、key 主にVue の仮想 DOM アルゴリズム の最適化戦略に使用されます。 Vue2 では、v-for 命令を使用してリストをレンダリングする場合、Vue は key の値に基づいて古いノードと新しいノードを比較します。 DOM更新します。 Vue2 の key には次の特性があります:
はオブジェクトや配列にすることはできません。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]
##key の値は一意である必要があり、繰り返すことはできません。Vue2
最適化戦略を使用しているため、DOM の再配置と再レンダリングが改善されています。レンダリングのパフォーマンスを向上させ、誤ったデータ更新を回避します。 Vue3 のキー
の役割は と同じです。 Vue2.x バージョンの は とは異なり、主に ノード の ID を追跡するために使用されます。 Vue3 では、v-for ディレクティブを使用してリストをレンダリングする場合、Vue は key# の値に基づいてどのノードが新しいかを決定します。 ## どのノードが追加および削除され、DOM が更新されたか。 Vue3 の key には次の特性があります。 key は、 オブジェクトや配列を含む任意のタイプにすることができます。
キーの値は一意である必要があり、繰り返すことはできません。
Vue3 の key
とVue3 では、key の 一意性が保証されなければならないことを意味します。保証しないと、ノード ID の混乱が生じ、不正なレンダリング結果 が発生します。 この設計は主に レンダリング効率とパフォーマンスを向上させるためです。 Vue2 では、動的リストを処理するときに問題が発生する可能性があります。
理由 は、Vue2 が key
単純な判断を行って、古いノードと新しいノードの違いにより、どのノードが追加され、どのノードが削除されたかを正確に知ることができなくなります。 Vue3 はこれらの問題を解決します。 key
正確に判断できます。これにより、動的リストを処理する際の 
Vue3
Vue2 に存在するいくつかの問題が回避されます。したがって、ノードの ID を追跡するように key を設計することは、レンダリング効率とパフォーマンスを向上させる上で Vue3 にとって重要な最適化です。 #結論Vue2 の key と
key は主にレンダリング パフォーマンスを最適化するために使用され、Vue3 の key は主に、ノード。 Vue3 の key は、オブジェクトや配列を含む任意の型にすることができますが、一意性が保証されている必要があります。 Vue2 を使用するか Vue3 を使用するかにかかわらず、v-for を使用する場合は key を追加する必要があることに注意する必要があります。リスト Attribute をレンダリングする命令。これは、レンダリングの正確性を保証するためです。
vuejs 入門チュートリアル 、基本プログラミング ビデオ )
以上がVue2 のキーと Vue3 のキーの違いについて説明した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
