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 ソースコード

推薦する

MySQLデータベース入門:データベースバックアップ操作の詳細な説明

目次1. 単一データベースのバックアップ2. 圧縮バックアップ3. マルチデータベースバックアップ4...

MySQL の重要なログファイルの包括的なインベントリ

目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...

Alibaba Cloudのセキュリティルール設定の詳細な説明

2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS(サーバー...

VMware を使用して PXE バッチ インストール サーバーをテストする詳細なプロセス

目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...

JavaScript は最大値と最小値のアルゴリズムを通じて AI 三目並べゲームを実装します

では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...

Vue フロントエンド開発における階層的にネストされたコンポーネント間の通信の詳細な説明

目次序文例まとめ序文Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コン...

MySQL データ型の詳細

目次1. 数値型1.1 数値型の分類1.1.1 浮動小数点数1.1.2 ビットタイプ1.1.3 時間...

Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)

目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

Dockerコンテナ内で2つのプロセスを開始するときのDockerfile実装コード

最近、cronスケジュールタスク用のdockerを作りたいと思っており、Dockerfileで次のよ...

Centos Docker ブリッジ モードでホスト Redis サービスにアクセスできないというトラブルシューティングの経験

背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...

HTMLタグのデフォルトスタイルの配置

html、address、blockquote、body、dd、div、dl、dt、fieldset...

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....