導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポーネントの形式で導入されています。一部のフィールドは :formatter メソッドによってトランスコードされ、結果列のフィールド表示/非表示制御もコンポーネントの形式で導入されています。フロントエンドがフィールド表示プロパティを制御すると、コード値の変換とフィールド情報の表示に問題があることがわかりました。 問題分析コード構造を読むと、el-table-column はテンプレート ループを通じて生成されていることがわかります。テンプレートはテンプレート プレースホルダーなので、要素をラップするのに役立ちますが、ループ中はテンプレートはページにレンダリングされません。テーブル データのレンダリングにおけるキーの役割は次のとおりです。
同時に、テンプレート タグは :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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: WeChatミニプログラムをTencent Mapsに接続する2つの方法
>>: Elimination の JavaScript ソースコード
目次1. 単一データベースのバックアップ2. 圧縮バックアップ3. マルチデータベースバックアップ4...
目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...
2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS(サーバー...
目次1. 準備1. 環境を整える2. インストール方法3. ネットワークカードの構成2. インストー...
検証環境: [root@~~/]# rpm -qa | grep mysql mysql-5.6.2...
では、早速スクリーンショットを実行してみましょう。黒い駒はプレイヤーの位置、赤い駒はコンピュータの位...
目次序文例まとめ序文Vue の親子コンポーネントは、props を通じて親コンポーネントの値を子コン...
目次1. 数値型1.1 数値型の分類1.1.1 浮動小数点数1.1.2 ビットタイプ1.1.3 時間...
フロントエンドテストページコード: <テンプレート> <div> <i...
目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...
このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...
最近、cronスケジュールタスク用のdockerを作りたいと思っており、Dockerfileで次のよ...
背景:以前、コンテナ内のホストが提供する Redis サービスにアクセスする必要があるプロジェクトを...
html、address、blockquote、body、dd、div、dl、dt、fieldset...
目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....