この記事では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+Struts2に検証コード検証機能を実装(グラフィックチュートリアル)
以上がvueのキープアライブキャッシュ機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。