Vueでは、key はv-for ループの子要素に一意の識別子を追加するために使用される特別な属性です。その主な役割は、Vue が各要素の ID 変更を追跡し、DOM 更新を効率的に実行できるように、レンダリングされた各要素に安定した ID を提供することです。
キーを使用する Vue の原理
- Vue はdiff アルゴリズムを通じて古い仮想DOMツリーと新しい仮想 DOM ツリーの違いを比較し、その違いに基づいてDOMを更新します。
- diffアルゴリズムの比較を実行するときに、要素にキーセットがない場合、Vue はインプレース再利用戦略を採用します。つまり、同じ位置にある要素は同じとみなされ、再作成または破棄されません。 、必要な属性の更新のみが実行されます。
- 要素にキーが含まれている場合、Vue はキーの値に基づいて要素の ID を決定します。Vue は、要素を直接更新するのではなく、同じキーを持つ要素を再利用しようとします。これにより、更新のコストが削減され、DOM操作の数が減り、レンダリングのパフォーマンスが向上します。
- 同じキーを持つ要素が新旧の仮想DOMツリーで見つからない場合、要素全体は再利用されず、作成されて破棄されます。
キーの値は一意で安定している必要があることに注意してください。インデックスをキーとして使用すると、配列が変更されるとインデックス値が変更され、不必要なDOM操作や不正なレンダリングが発生する可能性があるため、問題が発生する可能性があります。IDなどの一意の識別子を持つ属性値をキーとして使用することをお勧めします。
Vue でリストのレンダリングに v-for ディレクティブを使用する場合、key を使用して各リスト項目に一意の識別子を追加できます。
例 1: 配列ベースのリストのレンダリング
<template>
<ul>
<li v-for="item in items" :key="item.id">{
{
item.name }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1, name: 'Apple' },
{
id: 2, name: 'Banana' },
{
id: 3, name: 'Orange' }
]
};
}
}
</script>
上の例では、各リスト項目には一意の id 属性があり、それをキーとして使用します。このようにして、配列が変更されると、Vue はどの項目を更新する必要があるか、どの項目をキーに基づいて作成または破棄する必要があるかを正確に判断し、対応する DOM 操作を実行できます。
例 2: オブジェクトベースのリストのレンダリング
<template>
<ul>
<li v-for="(value, key) in items" :key="key">{
{
value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: {
item1: 'Apple',
item2: 'Banana',
item3: 'Orange'
}
};
}
}
</script>
この例では、リストのレンダリングにオブジェクトを使用して、オブジェクトのキーをキーとして各リスト項目にバインドします。このようにして、オブジェクトのプロパティが変更されると、Vue は各リスト項目の変更を正しく追跡し、それに応じて DOM を更新できます。
Vue のキーの主な機能には次の側面が含まれます。
-
要素の ID を決定する: v-for ループ内の各要素に一意のキーを設定することで、Vue は各要素の ID の変更を追跡できます。DOM を更新するとき、Vue はどの要素が新しく作成され、どの要素が更新され、どの要素が削除されるかを正確に判断して、対応する操作を実行し、不必要な DOM 操作を回避できます。
-
パフォーマンスの向上: キーを使用すると、Vue のレンダリング パフォーマンスを向上させることができます。配列が変更されると、Vue は古い仮想 DOM ツリーと新しい仮想 DOM ツリーの違いを比較して、DOM の更新が必要かどうかを判断します。キーを使用すると、Vue はどの要素を更新する必要があるか、どの要素を再利用できるかをより正確に検出できるようになり、不必要な DOM 操作の数が減り、パフォーマンスが向上します。
-
コンポーネントの状態の保持: コンポーネントを再レンダリングするときにキーが使用されない場合、Vue はコンポーネントを同じコンポーネントとして扱い、再作成するのではなく再利用するため、コンポーネントの内部状態は保持されません。キーを使用すると、各コンポーネントが一意の ID を持つことが保証され、再レンダリング後もコンポーネントの内部状態が保持されます。
-
リスト要素の再配置の問題を解決: リストに要素を追加または削除するときに、キーが使用されていない場合、要素が再配置される可能性があります。リスト要素に適切なキーを設定すると、Vue が各要素への変更を正確に追跡し、予期しない再配置の問題を回避できるようになります。
全体として、Vueにおけるキーの役割は、ループ内でレンダリングされる要素が一意であることを確認し、DOM更新時のパフォーマンスを向上させ、コンポーネントの状態を維持し、リスト要素の再配置の問題を解決することです。
キーの長所と短所を簡単に説明します。
キーを使用する利点:
-
DOM 更新効率の向上: 一意のキーを設定することで、Vue は各リスト項目またはコンポーネントの変更をより正確に追跡し、更新が必要な部分に対してのみ DOM 操作を実行できるため、ページのレンダリング効率が向上します。
-
状態の保持とコンポーネントの再利用: キーを使用すると、各コンポーネントが独立した ID を持つことが保証され、コンポーネントを再利用する際の状態の混乱を避けることができます。特に動的コンポーネントのシナリオでは、異なるキーを設定することで、各コンポーネントの独立した状態を維持できます。
-
フォーム入力要素のバインディング: フォーム入力要素に一意のキーを設定すると、入力要素の値が正しく追跡および更新され、入力ボックスの内容の混乱を避けることができます。
-
トランジション アニメーション コントロール: キーを使用すると、各トランジション要素が独立したアイデンティティを持つようになり、トランジション効果が正しく適用され、より柔軟で細かいアニメーション制御が実現します。
キーを使用するデメリット:
-
キー生成の追加管理が必要: リスト項目またはコンポーネントごとに一意のキーを生成するには、特定の管理と処理が必要であり、開発の複雑さが増大する可能性があります。
-
キーの不適切な使用によりエラーが発生する可能性があります: キーが不適切に選択されたり繰り返されたりすると、Vue が要素を正しく追跡および更新できなくなったり、バグが発生したりする可能性があります。
-
不必要な DOM 操作が発生する可能性がある: キー生成ルールが不安定であるか、不適切に選択されている場合、Vue が不必要な DOM 操作を実行し、パフォーマンスが低下する可能性があります。
したがって、キーを使用する場合は慎重に検討し、特定のビジネス シナリオとニーズに基づいてキーを使用するかどうか、またどのように使用するかを判断する必要があります。キーを正しく適切に使用すると多くの利点がもたらされますが、不適切に使用すると問題が発生する可能性があります。
Vue でのキーの使用シナリオには次の側面が含まれますが、これらに限定されません。
-
リストのレンダリング: リストのレンダリングに v-for ディレクティブを使用する場合、各リスト項目に一意のキーを設定することで、Vue は各リスト項目の ID の変更を追跡できるため、DOM 要素を正確に更新、作成、または破棄できます。
-
動的コンポーネント: 動的コンポーネントを使用する場合、各コンポーネントに一意のキーを設定することで、各コンポーネントが独自の ID を持つことを保証し、コンポーネントの再利用によって引き起こされる状態の混乱を回避できます。
-
フォーム入力要素: v-model ディレクティブを使用してフォーム入力要素をバインドする場合、各入力要素に一意のキーを設定すると、Vue が入力要素の値を正しく追跡して更新できるようになり、入力ボックスの内容の混乱を避けることができます。
-
トランジション アニメーション: Vue のトランジション アニメーションを使用する場合、各トランジション要素に一意のキーを設定することで、各要素が独立した ID を持つようになり、トランジション効果を正しく適用できます。
-
パフォーマンスの最適化: キーを適切に使用すると、Vue が変更を正確に追跡し、DOM 要素を可能な限り再利用し、不必要な DOM 操作を減らし、レンダリング パフォーマンスを向上させることができます。
特定のビジネス シナリオとニーズに基づいてキーを使用するかどうかを決定する必要があります。一般に、動的要素や可変要素に関しては、キーの使用は非常に便利であり、必要です。ただし、一部の静的固定リストでは、リスト項目が変更されないため、キーを使用する必要がない場合があります。