Vue でのリストレンダリングの最適化スキルと実践経験

Vue でのリスト レンダリングの最適化スキルと実践経験

序文
Vue を使用して Web アプリケーションを開発するプロセスでは、リスト レンダリングが一般的な要件になります。ただし、リストに大量のデータがある場合、DOM 操作が頻繁に行われると、ページのパフォーマンスが低下する可能性があります。この問題を解決するために、この記事では Vue でのリスト レンダリングの最適化テクニックをいくつか紹介し、実際の経験とコード例を示します。

1. キー値としてインデックスを使用しないでください

v-for ループを使用して Vue でリストをレンダリングする場合、各項目を一意に識別するためのキー値を指定する必要があります。場合によっては、開発者はキー値として循環インデックスを使用することを好む場合があります。ただし、このアプローチはお勧めできません。

インデックスをキー値として使用すると、いくつかの問題が発生します。リスト内の順序が変更されると、Vue は diff アルゴリズムを通じて DOM を再レンダリングします。キー値としてインデックスを使用すると、不必要な DOM 操作が発生し、パフォーマンスが低下する可能性があります。したがって、各項目の一意の識別子をキー値として使用する必要があります。

例:

d477f9ce7bf77f53fbcf36bec1b69b7a
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689
21c97d3a051048b8e55e3c8f199a54b2

2. v-if の代わりに v-show を使用します

#Vue では、v-if と v-show の両方で DOM 要素の表示と非表示を制御できます。ただし、v-if は DOM 要素を完全に再作成または破棄するため、追加のオーバーヘッドが発生します。また、v-show は、CSS プロパティを変更することによってのみ DOM 要素を非表示または表示します。したがって、リスト項目の表示と非表示を頻繁に切り替える必要がある場合は、v-if の代わりに v-show を使用する必要があります。

例:

d477f9ce7bf77f53fbcf36bec1b69b7a

ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id" v-show="item.visible">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689

21c97d3a051048b8e55e3c8f199a54b2

3. ローカル コンポーネント キャッシュを使用する

リスト内の各項目がより複雑なコンポーネントに対応する場合、Vue が提供するローカル コンポーネント キャッシュを使用してパフォーマンスを向上させることができます。コンポーネント定義を 7c9485ff8c3cba5ae9343ed63c2dc3f7 タグ内に配置すると、Vue はコンポーネント間を切り替えるときに、すでにレンダリングされたコンポーネントをキャッシュし、DOM 操作の繰り返しを回避します。

例:

d477f9ce7bf77f53fbcf36bec1b69b7a

ff6d136ddc5fdfeffaf53ff6ee95f185

<keep-alive>
  <item :key="item.id" v-for="item in items"></item>
</keep-alive>

929d1f5ca49e04fdcb27f9465b944689

21c97d3a051048b8e55e3c8f199a54b2

4. 仮想リストを使用する

リスト内のデータ量が非常に大きい場合、仮想リストを使用してレンダリング パフォーマンスを最適化できます。仮想リストは、リスト全体ではなく、現在表示されているリスト項目のみをレンダリングします。仮想リストは、各リスト項目の位置とサイズを動的に計算することで実装できます。

以下は、Vue ベースの仮想リスト プラグインである vue-virtual-scroll-list の使用例です:

d477f9ce7bf77f53fbcf36bec1b69b7a

ff6d136ddc5fdfeffaf53ff6ee95f185

<virtual-list :size="items.length" :remain="10">
  <template v-slot="{ range }">
    <li v-for="index in range" :key="items[index].id">{{ items[index].name }}</li>
  </template>
</virtual-list>

929d1f5ca49e04fdcb27f9465b944689

21c97d3a051048b8e55e3c8f199a54b2

5. ページング ロードを使用する

リスト データの量が多すぎる場合は、ページング ロードを使用できます。 1 回限りの読み込みを軽減するため、大量のデータがページのパフォーマンスに与える影響を軽減します。リストを複数のページに分割し、毎回現在のページのデータのみをロードし、ページ切り替え機能を提供することで、ページのレンダリング圧力を効果的に軽減できます。

以下は、Vue ベースのページング読み込みプラグインである vue-infinite-scroll の使用例です:

d477f9ce7bf77f53fbcf36bec1b69b7a

6f780d7074d58cb49ead325aa09afdfd
ff6d136ddc5fdfeffaf53ff6ee95f185

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

929d1f5ca49e04fdcb27f9465b944689

862fafdecd34660bf032761b2ec35101
eee507863231767bdcc207556a71d96d

<button @click="loadMore">Load More</button>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

「vue-infinite-scroll」から InfiniteScroll をインポート

デフォルトをエクスポート{

data() {

return {
  items: [],
  page: 1
}

},

メソッド: {

loadMore() {
  // AJAX请求获取下一页数据
  // this.items = [...this.items, ...newData]
  this.page++
}

},

mount() {

// 初始化分页加载插件
// this.$refs.infiniteScroll.addEventListener('scrolled', this.loadMore)

},

beforeDestroy() {

// 销毁分页加载插件
// this.$refs.infiniteScroll.removeEventListener('scrolled', this.loadMore)

}

}
2cacc6d41bbb37262a98f745aa00fbf0

結論

上記の最適化スキルと実践的な経験を通じて、リストのレンダリングをさらに処理できるようになります。 Vue で効率的に、ページのパフォーマンスを最適化します。キー値の合理的な選択、v-show の使用、ローカル コンポーネント キャッシュ、仮想リスト、およびページングの読み込みにより、ページのレンダリング速度とユーザー エクスペリエンスが向上します。この記事が Vue でリスト レンダリングを使用するプロセスに役立つことを願っています。

以上がVue でのリストレンダリングの最適化スキルと実践経験の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。