ホームページ > 記事 > ウェブフロントエンド > ページのパフォーマンスを向上させるための 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 では、6c123bcf29012c05eda065ba23259dcb および 2831cd99d48ab9fc05f985b5a69459c2 コンポーネントを使用してレンダリングを最適化できます。動的コンポーネントの。 6c123bcf29012c05eda065ba23259dcb を使用すると、DOM ツリーに追加のレベルを作成せずにコンポーネントのコンテンツを指定した DOM 要素にレンダリングできます。2831cd99d48ab9fc05f985b5a69459c2 を使用すると、コンポーネントを非同期でロードするときにロード ステータスを表示できるため、ユーザー エクスペリエンスが向上します。
<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 サイトの他の関連記事を参照してください。