vueプロジェクト最適化のkeep-aliveデータキャッシュを通過する方法
2490 ワード
<keep-alive>はVueの内蔵部品であり、コンポーネント切り替え中にメモリに状態を残して、DOMの繰り返しレンダリングを防ぐことができます。
<keep-alive>ダイナミックコンポーネントを包むと、廃棄するのではなく、活動しないコンポーネントの例がキャッシュされます。「transion」と似ています。「keep-alive」は、DOM要素を自身でレンダリングすることはなく、親のコンポーネントチェーンにも現れない抽象的なコンポーネントです。
prop: include:文字列または正規表現。マッチしたコンポーネントだけがキャッシュされます。 exclude:文字列または正規表現。どのコンポーネントもキャッシュされません。 vueで提供されるkeep-aliveはサーバに対する要求回数を減らします。
VUE 2.0において、keep-alive方法が提供され、コンポーネントをキャッシュするために使用され、対応するコンポーネントを複数回ロードしないようにして、性能の消費を低減する。例えば、1ページのデータには、画像、テキストなどのユーザーが既にロード済みで、ユーザーはクリックして別の画面に移動します。そして別の界面から引き返して元の界面に戻った。もし設定されていないなら、元のインターフェースの情報は再度サーバに要求されます。vueによって提供されるkeep-aliveは、ページの要求済みデータとして保存され、要求の回数を減らし、ユーザーの体験度を向上させることができる。
キャッシュコンポーネントはまた、サイト全体のページをキャッシュするコンポーネントまたは一部のページの2つに分けられます。
1、すべてのページをキャッシュし、各ページに要求がある場合に適用する。方法は以下の通りです。キャッシュが必要なrouter-viewでkeep-aliveラベルで包みます。
2、キャッシュ部分またはページは、router.metaという属性を用いて判断する方法で実現されます。方法は以下の通りです
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
<keep-alive>ダイナミックコンポーネントを包むと、廃棄するのではなく、活動しないコンポーネントの例がキャッシュされます。「transion」と似ています。「keep-alive」は、DOM要素を自身でレンダリングすることはなく、親のコンポーネントチェーンにも現れない抽象的なコンポーネントです。
prop:
VUE 2.0において、keep-alive方法が提供され、コンポーネントをキャッシュするために使用され、対応するコンポーネントを複数回ロードしないようにして、性能の消費を低減する。例えば、1ページのデータには、画像、テキストなどのユーザーが既にロード済みで、ユーザーはクリックして別の画面に移動します。そして別の界面から引き返して元の界面に戻った。もし設定されていないなら、元のインターフェースの情報は再度サーバに要求されます。vueによって提供されるkeep-aliveは、ページの要求済みデータとして保存され、要求の回数を減らし、ユーザーの体験度を向上させることができる。
キャッシュコンポーネントはまた、サイト全体のページをキャッシュするコンポーネントまたは一部のページの2つに分けられます。
1、すべてのページをキャッシュし、各ページに要求がある場合に適用する。方法は以下の通りです。キャッシュが必要なrouter-viewでkeep-aliveラベルで包みます。
<keep-alive>
<router-view></router-view>
</keep-alive>
最初のトリガ要求をcreatedフックに書くと、キャッシュが実現されます。リストページから、詳細ページに行っても、元のページに戻ります。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以外の意味です。ここではコンポーネントの名前であるnameを使って設定しますので、nameは必ず加えます。 aを追加すると、bコンポーネントはキャッシュを必要とし、c、dコンポーネントはキャッシュを必要としない。書き方は以下の通りです
<keep-alive include="a,b">
<component></component>
</keep-alive>
<keep-alive exclude="c,d">
<component></component>
</keep-alive>
vueプロジェクトの最適化は、コンポーネントの必要に応じてロードされても、画像の怠惰なロードのように、もしお客様がそれらの写真を見ていないならば、私達はページを開けた時に全部ローディングしました。このように要求の時間を大幅に増やして、ユーザーの体験のレベルを下げることができます。怠惰なロードは多くのウェブサイトで役に立ちます。例えば、タオバオ、京东などのようなショッピングサイトでは、上の写真のリンクなどがたくさんあります。もしローラーを素早く下に引くと、画像のロードが见られるかもしれません。具体的にどのように使ったらいいですか?他の文章を見てもいいです。vueプロジェクト最適化のページは必要に応じてロードされます(vue+webpack)以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。