vue+keep-alive による Web サイトのキャッシュの操作方法

php中世界最好的语言
リリース: 2018-06-14 11:44:21
オリジナル
1899 人が閲覧しました

今回は、vue+keep-alive が Web サイトのキャッシュを操作する方法と、vue+keep-alive を使用して Web サイトのキャッシュを操作する際の注意点について説明します。以下は実際のケースです。

Vueはコンポーネント情報のキャッシュを実装しています

vueプロジェクトを開発していると、ルートを他のコンポーネントに切り替えて戻った後にコンポーネントデータをリロードすることは避けられません。この状況に対処するために、次のことが必要です。キープアライブ キャッシュを使用すると、vue コンポーネント情報が再ロードされないようになります。

1. app.vue 内

<keep-alive>
  <router-view></router-view>
</keep-alive>
ログイン後にコピー

ただし、この場合、すべてのコンポーネントがキャッシュされ、単一コンポーネントをキャッシュする効果は得られません。

次に、いくつかのコンポーネントを追加します。実装方法は次のとおりです:

app.vue内

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
<!-- 这里不会被keepAlive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
ログイン後にコピー

2. ルーティングindex.jsページ内

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
},
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}
ログイン後にコピー

これにより、一部のコンポーネントのキャッシュ機能が実現されます

キャッシュされたコンポーネントがデータをクリアするか、初期化メソッドを実行する必要がある場合は、次のように、コンポーネントをロードするときにアクティブ化されたフック関数を呼び出します:

activated: function () {
  this.data = ‘'
}
ログイン後にコピー

この記事の事例を読んだ後は、メソッドを習得していると思います。さらに興味深い情報については、こちらをご覧ください。 、PHP 中国語 Web サイトの記事の他の関連トピックにも注目してください。

推奨読書:

vue-route+beforeEach を使用してナビゲーション ガードを作成する

Webpack がキャッシュを操作する方法

以上がvue+keep-alive による Web サイトのキャッシュの操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート