導入フロントエンドプロジェクトの開発プロセスでは、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 ソースコード
最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...
コード: <input type="text" class="t...
問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...
LocalStorageはブール値を保存します今日、ブール値データを保存するために localsto...
目次導入インストール表示フィールドフィルターソートキー導入Rhit は、標準フォルダー (gzip ...
目次安定スロットリング要約する安定自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始し...
概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...
いわゆるカスケード レプリケーションでは、マスター サーバーが 1 つのスレーブ サーバーにのみデー...
<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...
最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...
MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...
K8s k8s はクラスターです。クラスターには複数の名前空間があります。名前空間の下には複数のポッ...
キーボードで文字を入力すると、対応するプロセスにどのように送信されるのでしょうか? ps や who...
1.vueパッケージングここでは、vueネイティブパッケージングコマンドを使用してvueプロジェクト...
まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...