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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはページデータのレンダリングが完了した後にメソッドを呼び出します。
  • Vue 初心者向けの Vue レンダリング ページ チュートリアル
  • Vue.js、Ajax レンダリング ページの例
  • Vue ページはレンダリングされるが DOM はレンダリングされない問題を解決する
  • Vue の非同期データがページレンダリングにどのように影響するかについて簡単に説明します。

<<:  WeChatミニプログラムをTencent Mapsに接続する2つの方法

>>:  Elimination の JavaScript ソースコード

推薦する

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...

MySQL の起動時に InnoDB エンジンが無効になる問題の解決方法

問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...

ローカルストレージにブール型の値を保存する際の落とし穴を解決する

LocalStorageはブール値を保存します今日、ブール値データを保存するために localsto...

効率的な視覚化Nginxログ表示ツール

目次導入インストール表示フィールドフィルターソートキー導入Rhit は、標準フォルダー (gzip ...

JavaScript の手ぶれ補正とスロットリングの説明

目次安定スロットリング要約する安定自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始し...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

MySQLカスケードレプリケーションの実装方法の例

いわゆるカスケード レプリケーションでは、マスター サーバーが 1 つのスレーブ サーバーにのみデー...

デザイン理論: テキストの読みやすさと可読性

<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

MySQLのページング制限のパフォーマンス問題についての簡単な説明

MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...

Dockerでk8sをデプロイする方法

K8s k8s はクラスターです。クラスターには複数の名前空間があります。名前空間の下には複数のポッ...

Linux TTY/PTS の違いの概要

キーボードで文字を入力すると、対応するプロセスにどのように送信されるのでしょうか? ps や who...

vue + Electron でデスクトップ アプリケーションを作成するためのサンプル コード

1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...

aタグのhref属性とonclickイベントの比較

まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...