ページのパフォーマンスを向上させるための Vue 3 の仮想 DOM 最適化テクニック-Vue.js-php.cn

ページのパフォーマンスを向上させるための Vue 3 の仮想 DOM 最適化テクニック

WBOY

リリース： 2023-09-09 14:25:41

オリジナル

1041 人が閲覧しました

Vue 3中的虚拟DOM优化技巧，提升页面性能

ページのパフォーマンスを向上させるための Vue 3 の仮想 DOM 最適化テクニック

はじめに:
フロントエンドテクノロジの継続的な開発により、仮想 DOM は現代的なものになりました。フロントエンドフレームワークは不可欠な部分です。市場で最も人気のあるフロントエンドフレームワークの 1 つである Vue は、ページレンダリングのパフォーマンスを向上させるために仮想 DOM も使用します。 Vue 3 では、開発チームは仮想 DOM をさらに最適化し、ページのパフォーマンスをさらに向上させるためのヒントと方法を提供しました。この記事では、Vue 3 での仮想 DOM 最適化テクニックをコード例とともにいくつか紹介します。

1. フラグメントを使用して無駄なタグを減らす

Vue 3 では、フラグメントを使用して、最終的にレンダリングされる DOM ツリーに冗長なタグを生成せずに要素のグループをラップできます。これにより、仮想 DOM の生成と比較の時間が短縮され、ページのレンダリングパフォーマンスが向上します。

<template>
  <div>
    <h1>这是标题</h1>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

ログイン後にコピー

上記のコードでは、div タグはコンテンツをラップするだけであり、実際の意味はありません。 Fragment を使用して置き換えることができます:

<template>
  <fragment>
    <h1>这是标题</h1>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </fragment>
</template>

ログイン後にコピー

2. 動的コンポーネントの合理的な使用

Vue 3 では、およびコンポーネントを使用してレンダリングを最適化できます。動的コンポーネントの。を使用すると、DOM ツリーに追加のレベルを作成せずにコンポーネントのコンテンツを指定した DOM 要素にレンダリングできます。を使用すると、コンポーネントを非同期でロードするときにロードステータスを表示できるため、ユーザーエクスペリエンスが向上します。

<template>
  <div>
    <h1>{{ title }}</h1>
    <teleport to="body">
      <Modal v-if="showModal" @close="showModal = false">
        内容
      </Modal>
    </teleport>
    <button @click="showModal = true">打开模态框</button>
  </div>
</template>

ログイン後にコピー

3. 不要な応答性の高いデータを回避する

Vue 3 では、非応答性としてマークされたデータを使用して、不必要なデータの変更を回避し、それによってページのレンダリングパフォーマンスを向上させることができます。 setup 関数で ref を使用すると、通常のデータを応答性の高いデータにラップできます。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="incrementCount">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function incrementCount() {
      count.value++;
    }

    return {
      count,
      incrementCount,
    };
  },
};
</script>

ログイン後にコピー

4. v-if 命令と v-show 命令の合理的な使用

Vue 3 では、v-if 命令と v-show 命令の両方を使用してコンポーネントの表示と非表示を制御できます。または要素ですが、状況に応じて異なるアプリケーションシナリオが存在します。

v-if は条件付きブロックを遅延レンダリングします。条件が true の場合にのみレンダリングされ、それ以外の場合はレンダリングのオーバーヘッドは発生しません。頻繁な切り替えが必要なシナリオに適しています。

v-show は、要素の CSS スタイルを変更することで表示と非表示を制御します。要素は常に実際の DOM に残り、CSS の "display" 属性を切り替えるだけで済みます。最初は非表示になっているものの、切り替わる頻度が低いシーンに適しています。

5. リストレンダリングとキー属性の適切な使用

Vue 3 では、リストレンダリングに v-for ディレクティブを使用する場合、各項目に一意のキー属性を追加する必要があります。このように、Vue はキー属性に基づいて仮想 DOM ツリー内の差異を迅速に比較できるため、不必要な再レンダリングが削減されます。

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

ログイン後にコピー

6.コンポジション API を使用してロジックの再利用を最適化する

Vue 3 では、コンポジション API は、関連するロジックを結合できる、より柔軟で強力なロジック再利用の方法を提供します。再利用性。

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    function increment() {
      count.value++;
    }
    
    function decrement() {
      count.value--;
    }

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>

ログイン後にコピー

概要:
この記事では、Vue 3 での仮想 DOM 最適化テクニックを紹介し、コード例を添付します。フラグメント、動的コンポーネント、不要な応答データ、v-if および v-show 命令、リストレンダリングとキー属性、コンポジション API を合理的に使用することで、ページのパフォーマンスをさらに最適化し、ユーザーエクスペリエンスを向上させることができます。この記事が Vue 開発のパフォーマンスの最適化に役立つことを願っています。

以上がページのパフォーマンスを向上させるための Vue 3 の仮想 DOM 最適化テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。