Vue ページレンダリングにおけるキーの適用例チュートリアル

導入

フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポーネントの形式で導入されています。一部のフィールドは :formatter メソッドによってトランスコードされ、結果列のフィールド表示/非表示制御もコンポーネントの形式で導入されています。フロントエンドがフィールド表示プロパティを制御すると、コード値の変換とフィールド情報の表示に問題があることがわかりました。

問題分析

コード構造を読むと、el-table-column はテンプレートループを通じて生成されていることがわかります。テンプレートはテンプレートプレースホルダーなので、要素をラップするのに役立ちますが、ループ中はテンプレートはページにレンダリングされません。テーブルデータのレンダリングにおけるキーの役割は次のとおりです。

キーは DOM ノードの識別値であり、Diff アルゴリズムと組み合わせることでノードを再利用できます。 (同じキーを持つノードは再利用されます);
キー (または isSameNode が false になるその他の要因) が変更された場合にのみ、ノードが再レンダリングされます。それ以外の場合、Vue は以前のノードを再利用し、ノードのプロパティを変更してノードを更新します。

同時に、テンプレートタグは :key 属性をサポートしていません。

注意: vue インスタンスにバインドされた要素内のテンプレートタグは v-show ディレクティブをサポートしていません。つまり、v-show="false" はテンプレートタグでは機能しません。ただし、テンプレートタグは v-if、v-else-if、v-else、v-for 命令をサポートするようになりました。

回避策

テンプレートタグは key 属性をサポートしていないため、el-table-column タグに key="Math.random()" 属性を追加できます。この key 属性は Vue の特別な属性で、主に Vue の仮想 DOM アルゴリズムで使用され、新しいノードと古いノードを比較するときに VNode を識別し、ページのレンダリングパフォーマンスを向上させます。このキーが更新されないと、列の表示/非表示時に DOM の一部が再レンダリングされず、テーブルが変更されたときに混乱が生じます。

さらに読む

1. キーの役割

前述のように、DOM ノードの識別値として、Diff アルゴリズムと組み合わせてノードを再利用できます。 (同じキーを持つノードは再利用されます。)

キー (または isSameNode が false になるその他の要因) が変更された場合にのみ、ノードが再レンダリングされます。それ以外の場合、Vue は以前のノードを再利用し、ノードのプロパティを変更してノードを更新します。では、ID とインデックスをキーとして使用する場合の違いは何でしょうか?

2. キーにIDとインデックスを使用する違い

インデックスをキーとして使用することは推奨されません。次のように、一部のノードが誤ってその場で再利用されるためです。

パフォーマンスの低下: リストがレンダリングされると、変更された項目の後のすべてのリストノード (コンテンツ) が更新されます (キーが機能しないのと同じです)。
エラーが発生しました: 一部のノードが間違った場所で再利用されました。（例えば、リスト項目にチェックボックスが使用されている場合）

パフォーマンスの低下

リストがレンダリングされると、変更された項目以降のすべてのリストノード（コンテンツ）が更新されます（キーが機能しないのと同じです）

変更項目後のすべてのリストノードの更新は、基本的にノード属性の更新であり、ノード自体は再利用されることに注意してください。

<!-- テストコード -->
<テンプレート>
 <div>
 <div v-for="(item, index) in arr" :key="index または item.id">
  {{item.data}}
 </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ（）{
 戻る {
  arr: Array.from({length: 10000}, (v, i) => {return {id: i, data: i}})
 }
 },
 マウントされた(){
 タイムアウトを設定します(()=>{
  /* 
  1. this.shiftArr() // 最初の項目を削除するか、2. this.unShiftArr() // 先頭に新しい項目を挿入します */
 }, 1000)
 },
 メソッド: {
 シフトArr(){
  シフト
 },
 アンシフトArr(){
  this.arr.unshift({id: -1, データ: -1});
 }
 }
}
</スクリプト>

上記の例は非常に単純です。v-for は長さ 10,000 のリストをレンダリングします。次に、Vue が 1 秒間マウントされた後、リストの最初の項目の削除、またはリストヘッダーへの新しい項目の挿入を実行し、2 つのキーバインディングの特定のページ更新オーバーヘッドを観察します。

ページのオーバーヘッドはChromeのパフォーマンスタブを使用して測定されます

リストの最初の項目を削除する

リストの先頭を新しい要素にシフト解除する

エラーが発生しました

一部のノードが間違った場所で再利用されています。（例えば、リスト項目にチェックボックスが使用されている場合）

<!-- テストコード -->
<テンプレート>
 <div>
 <button @click="test">リストの最初の項目を削除します</button>
 <div v-for="(item, index) in arr" :key="index または item.id">
  <入力タイプ="チェックボックス" />
  {{item.data}}
 </div>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前: 'HelloWorld',
 データ（）{
 戻る {
  arr: Array.from({length: 5}, (v, i) => {return {id: i, data: i}})
 }
 },
 メソッド: {
 テスト（）{
  シフト
 }
 }
}
</スクリプト>

要約する

これで、Vue ページレンダリングにおけるキーの適用に関するこの記事は終了です。Vue ページレンダリングキーのより関連性の高い適用内容については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: