vueのキープアライブキャッシュ機能の実装

この記事ではvueのキープアライブキャッシュ機能の実装を中心に紹介しますので、参考にしてください。

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 = ‘'
}

上記は私がコンパイルしたものです皆様にとって、今後も皆様のお役に立つことを願っております。

関連記事:

超実践的なajaxユーザー登録モジュール

Ajaxクリックでデータリストを連続ロードする(グラフィックチュートリアル)

Ajax+Struts2に検証コード検証機能を実装(グラフィックチュートリアル)

以上がvueのキープアライブキャッシュ機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。