Vue でキープアライブを通じて最適化する方法-jsチュートリアル-php.cn

Vue でキープアライブを通じて最適化する方法

亚连

リリース： 2018-06-21 16:16:26

オリジナル

1363 人が閲覧しました

この記事では、キープアライブデータキャッシュによる Vue プロジェクトの最適化の方法を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。エディターに従って見てみましょう。

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

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

prop:

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

vue が提供するキープアライブを通じてサーバーへのリクエストの数を削減します

VUE2.0 は、コンポーネントをキャッシュするために使用できるキープアライブメソッドを提供し、対応するコンポーネントの複数のロードを回避します時間を短縮し、パフォーマンスの消費を削減します。たとえば、画像やテキストなどを含むページのデータがユーザーによってロードされ、ユーザーはそれをクリックすることで別のインターフェイスにジャンプします。その後、別のインターフェースから元のインターフェースに戻ります。設定されていない場合は、再度元のインターフェースの情報をサーバーに要求します。 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: &#39;/home&#39;,
        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)

上記は私があなたのためにまとめたものです。未来。

JQUERYを使用して複数のAJAXリクエストを実装する方法

NodeJsでファイルを転送するためにフォームデータ形式を使用する方法

WeChatアプレットで画像の遅延読み込みを実装する方法

使い方 jsでフォーカスマップ効果を実現する方法

以上がVue でキープアライブを通じて最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。