Vue で v-for を使用するためのベストプラクティスとパフォーマンスの最適化方法-Vue.js-php.cn

Vue で v-for を使用するためのベストプラクティスとパフォーマンスの最適化方法

WBOY

リリース： 2023-07-17 08:53:26

オリジナル

1543 人が閲覧しました

Vue で v-for を使用するためのベストプラクティスとパフォーマンスの最適化方法

はじめに:
Vue 開発では、配列や配列を簡単に変換できる v-for 命令を使用するのが非常に一般的です。オブジェクトのデータが走査され、テンプレートにレンダリングされます。ただし、v-for を不適切に使用すると、大規模なデータを処理するときにパフォーマンスの問題が発生する可能性があります。この記事では、v-for ディレクティブを使用する際のベストプラクティスを紹介し、パフォーマンスを最適化する方法をいくつか紹介します。

ベストプラクティス:

一意のキー値を使用する
Vue で v-for 命令を使用してデータの各項目をレンダリングする場合、一意のキーを指定する必要があります。各項目の値です。これは、Vue が効率的な diff アルゴリズムを実行して DOM 操作の数を減らすのに役立ちます。通常、各項目の一意の識別子 (id や uuid など) をキー値として使用できます。

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

ログイン後にコピー

インデックスをキー値として使用しないでください
v-for ディレクティブを使用する場合、利用可能な一意の識別子がない限り、インデックスをキー値として使用することはお勧めできません。キー値としてインデックスを使用すると、特にデータの追加または削除時にパフォーマンスの問題が発生する可能性があるためです。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
  </ul>
</template>

ログイン後にコピー

計算プロパティをフィルタリングと並べ替えに使用する
リストをフィルタリングまたは並べ替える必要がある場合、v-for ディレクティブで直接操作することはお勧めできません。代わりに、計算されたプロパティを使用してデータを処理し、パフォーマンスを向上させることができます。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
      ],
      filterText: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.includes(this.filterText));
    }
  }
}
</script>

ログイン後にコピー

ページングを使用してデータをロードする
大規模なデータを処理する場合、すべてのデータを一度にレンダリングすると、ページのパフォーマンスが低下する可能性があります。したがって、ページングを使用してデータをロードし、必要に応じてデータを表示し、レンダリングすることをお勧めします。

パフォーマンス最適化メソッド:

v-for ディレクティブ内で複雑な計算プロパティとメソッドを使用しないでください。計算が繰り返され、パフォーマンスの問題が発生する可能性があります。これらの複雑な計算ロジックは、処理のために計算属性に移動できます。
条件付きレンダリングには、v-if ディレクティブの代わりに v-show を使用します。 v-show 命令は最初のレンダリング中にのみ非表示になりますが、v-if 命令は各レンダリングで DOM 操作を実行します。
応答性の高い更新を必要としないデータの場合、Object.freeze() を使用してデータオブジェクトをフリーズし、不必要なリスニングおよび更新操作を回避できます。
リスト項目にフォーム要素がある場合は、Vue の再利用メカニズムによる誤用を避けるために、各フォーム要素に一意のキー値を追加することをお勧めします。

結論:
Vue で v-for ディレクティブを使用することは、データをレンダリングする一般的な方法ですが、大規模なデータを処理する場合は、使用のベストプラクティスに注意を払う必要があります。 v-for およびページのパフォーマンスを向上させるために、パフォーマンスの最適化措置を講じます。これらの推奨事項に従うことで、より良いユーザーエクスペリエンスを実現し、アプリケーションのパフォーマンスを向上させることができます。

参考資料: