キープアライブ データ キャッシュによる Vue プロジェクトの最適化方法

この記事では主にキープアライブデータキャッシュによる Vue プロジェクトの最適化方法を紹介します。内容が非常に優れているので、参考として共有します。

は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリに保持して、DOM の繰り返しレンダリングを防ぐことができます。

動的コンポーネントをラップするとき、非アクティブなコンポーネントのインスタンスは破棄されずにキャッシュされます。 と同様、 は抽象コンポーネントです。これ自体は DOM 要素をレンダリングしませんし、親コンポーネント チェーンにも表示されません。

prop:

1. include: 文字列または正規表現。一致するコンポーネントのみがキャッシュされます。

2. 除外: 文字列または正規表現。一致するコンポーネントはキャッシュされません。サーバーへのリクエストの数を減らすために、Vue が提供する Keep-Alive によって提供される Keep-Alive メソッド

Vue2.0 は、対応するコンポーネントの複数の読み込みを回避し、コンポーネントをキャッシュするために使用できる keyp-alive メソッドを提供しますパフォーマンスの消費。たとえば、画像やテキストなどを含むページのデータがユーザーによってロードされ、ユーザーはそれをクリックすることで別のインターフェイスにジャンプします。その後、別のインターフェースから元のインターフェースに戻ります。設定されていない場合は、再度元のインターフェースの情報をサーバーに要求します。 vue が提供するキープアライブは、ページの要求されたデータを保存し、要求の数を減らし、ユーザー エクスペリエンスを向上させることができます。

キャッシュ コンポーネントは、サイトのページ全体をキャッシュするコンポーネントと部分的なページをキャッシュするコンポーネントの 2 つのタイプに分類されます。

1. 各ページにリクエストがある状況に適した、すべてのページをキャッシュします。方法は以下の通り、キャッシュが必要なrouter-viewをkeep-aliveタグでラップします。

<keep-alive>
<router-view></router-view>
</keep-alive>

作成されたフックに最初のトリガーリクエストを書き込み、キャッシュを実現します。たとえば、一覧ページから詳細ページに移動した場合、戻ってきたときに元のページが表示されます。

2. 一部のコンポーネントまたはページをキャッシュするには、router.meta 属性を使用して判断してこれを実現できます。メソッドは次のとおりです。

<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-if="! $route.meta.keepAlive">
</router-view>

router は次のように設定されます。

 routers:[
      {  path: '/home',
        name: home,
        meta:{keepAlive: true}   // 设置为true表示需要缓存，不设置或者false表示不需要缓存                    }
     ]

は、新しい属性 include/exclude を通じて設定することもできます。名前には意味が含まれており、include は含めることを意味し、exclude は除外することを意味します。ここではコンポーネントの名前を使用して設定する必要があるため、名前を追加する必要があります。コンポーネント a と b を追加するにはキャッシュが必要ですが、コンポーネント c と d にはキャッシュが必要ありません。これは次のように書かれています:

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

顧客がそれらの写真を表示しない場合、vue プロジェクトの最適化は、画像の遅延読み込みと同様に、コンポーネントのオンデマンド読み込みによっても実現できます。すべてですが、ページを開いているすべてが読み込まれると、リクエスト時間が大幅に増加し、ユーザー エクスペリエンスが低下します。遅延読み込みは、淘宝網や JD.com などのショッピング サイトなど、多くの Web サイトで使用されており、スクロールをすばやく下に引くと、画像が読み込まれていることがわかります。具体的な使用方法については、別の記事を参照してください: vue プロジェクト最適化のためのページのオンデマンド読み込み (vue+webpack)

上記がこの記事の全内容です。関連コンテンツの詳細については、PHP 中国語 Web サイトを参照してください。

関連する推奨事項:

Vue コンポーネント オプション props の使い方の紹介

Vue.js ユニバーサル アプリケーション フレームワーク - Nuxt.js の分析

vue.js で axios を簡単に設定する方法の紹介

以上がキープアライブ データ キャッシュによる Vue プロジェクトの最適化方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。