ホームページ >ウェブフロントエンド >フロントエンドQ&A >Vue コード最適化のヒント
Vue コード最適化のヒント
- PHPzオリジナル
- 2023-04-18 15:20:03723ブラウズ
Vue は、データ駆動型の Web アプリケーションを迅速に構築できる人気のある JavaScript フレームワークです。ただし、Vue プロジェクトがますます複雑になるにつれて、コードの最適化が特に重要になります。コードを最適化しないと、アプリケーションのパフォーマンスが低下し、コードの保守が難しくなる可能性があります。この記事では、Vue コードの最適化テクニックをいくつか紹介します。
- テンプレートで複雑な計算を使用しないでください
Vue にはプロパティを計算する機能が用意されています。計算プロパティは、リアクティブ オブジェクトの値を、レンダリングに使用できる計算プロパティに変換します。これにより、テンプレート内で複雑な計算を直接使用するよりも、計算されたプロパティを使用する方が効率的になります。計算される属性が依存するデータが変更されない場合、計算値はテンプレート内で複数回使用されても 1 回だけ計算されます。
テンプレートに次のコードがあるとします。
<div>{{ items.filter(item => item.price > 10).map(item => item.name) }}</div>
このコードは、再レンダリングされるたびに項目配列を計算するため、項目配列が大きい場合、パフォーマンスの問題。代わりに、計算されたプロパティを使用して結果を計算できます。計算されたプロパティは、依存関係が変更されると再計算されます:
computed: {
filteredItems() {
return this.items.filter(item => item.price > 10)
},
itemNames() {
return this.filteredItems.map(item => item.name)
}
}
対応するテンプレート コードは次のようになります:
<div>{{ itemNames }}</div>
この方法により、アプリケーションが大幅に改善されます。パフォーマンス。
- テンプレート内でネストされた v-if および v-for を使用しないでください
テンプレートでは、v-if および v-for は 2 つの非常に強力なディレクティブです。ただし、これら 2 つの命令を一緒にネストすると、非常に遅くなります。例:
<div v-for="user in users" v-if="user.isActive">{{ user.name }}</div>
このコードは、v-for を使用して users 配列を走査し、次に v-if を使用して isActive が true である要素をフィルターで除外します。このプロセスは非常に非効率的です。 Vue はリスト全体を複数回計算し、そのたびに DOM 要素を再作成します。
パフォーマンスを向上させるために、v-if と v-for を計算された属性に変更できます:
computed: {
activeUsers() {
return this.users.filter(user => user.isActive)
}
}
次に、テンプレートで v-for を使用して activeUsers を走査します:
<div v-for="user in activeUsers">{{ user.name }}</div>
- ウォッチャーの数を減らす
ウォッチャーは、Vue データの応答性の高い更新メカニズムを提供します。プロパティが変更されると、ウォッチャーは関連するビューを自動的に更新します。ただし、ウォッチャーが多すぎると、パフォーマンスの問題が発生する可能性があります。一般に、ウォッチャーの数は Vue インスタンスのプロパティの数に比例します。
ウォッチャーの数を減らすために、ウォッチャーの代わりに計算された属性を使用できます。計算されたプロパティは依存関係が変更された場合にのみ再計算されますが、ウォッチャーはプロパティが変更されるたびに常に呼び出されます。プロパティが変更されるたびにビューを更新する必要がない場合は、計算されたプロパティを選択することをお勧めします。
- リスト レンダリングの最適化
Vue では、リスト レンダリングは非常に一般的なタスクです。リストのレンダリングを最適化するには、key 属性を使用できます。 key 属性は、リスト内の各項目を区別する ID です。これにより、Vue は、同じリスト項目を繰り返しレンダリングするときに、DOM 要素の変更をより迅速に検出し、状態をより迅速に復元できるようになります。
ただし、大きなリストでは動的キーを使用しないように注意してください。動的キーを使用すると、Vue がリスト全体を再レンダリングすることになり、パフォーマンスに非常に負荷がかかります。代わりにキーを使用しますが、それが静的であり、リスト全体で一意であることを確認してください。
- 非同期コンポーネントの使用
Vue は、コンポーネントの読み込みを遅らせることができる非同期コンポーネント機能を提供し、それによってアプリケーションの初期化速度を向上させます。大きなコンポーネントまたはページがある場合は、この方法で最適化して、ページの最初のページの読み込みを高速化できます。 Vue の非同期コンポーネント機能を使用するには、Webpack などの同様のパッケージ化ツールを使用する必要があります。
- Vue Devtools を使用したパフォーマンス テスト
Vue Devtools は、Vue アプリケーションをデバッグするためのブラウザ拡張機能です。 Vue コンポーネントの階層と状態を提供するだけでなく、アプリケーションのパフォーマンスをチェックすることもできます。 Devtools のパフォーマンス分析を使用すると、パフォーマンスの問題を厳密に調査し、実際のパフォーマンスを追跡して、最も遅いコード パスとその原因を特定できます。これは、Vue アプリケーションのパフォーマンスを最適化するための優れたツールです。
概要:
上記は、Vue アプリケーションのパフォーマンスを最適化するためのヒントです。 Vue アプリケーションのパフォーマンスは、テンプレートでの複雑な計算を回避し、リストのレンダリングを最適化し、最初の画面時間に影響を与える非同期コンポーネントなどを使用することで大幅に改善できます。最後に、Vue Devtools の使用は、アプリケーションのパフォーマンスの問題を検出して解決するための優れた方法です。
以上がVue コード最適化のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。