ホームページ > 記事 > ウェブフロントエンド > Vue はキープアライブを使用して、インスタンス共有を更新せずにデータキャッシュを実装します。

Vue はキープアライブを使用して、インスタンス共有を更新せずにデータキャッシュを実装します。

小云云オリジナル: 2018-01-04 10:51:341320ブラウズ

この記事では主に、更新せずにデータをキャッシュするための Vue のキープアライブの使用方法を紹介します。詳細なコードはここにまとめられています。興味のある方は参考にしていただければ幸いです。

これまで、Vueを短期間触っていてプロジェクトはある程度進みましたが、プロジェクトにはキャッシュ機構がないため、ページを開くたびにデータが再作成されます。システムのデータ要求速度は非常に速いですが、これはシステムのパフォーマンスに大きく悪影響を与えるため、システムを最適化し、キャッシュを追加する必要があります。

実は今までVueを使いこなせていませんでしたが、掘り下げるたびにVueの素晴らしさを発見することになります。長い間、vuex、vuet、または keep-alive を使用するといういくつかの意見がありましたが、それを比較したところ、vuex と vuet は状態管理を実装し、全体的なデータ処理に重点を置いていると思います。キャッシュして作成されたファイルの更新を防ぐには、キープアライブを使用する必要があります。

それでは、ここでキープアライブを使用してキャッシュされたページを実装する方法を紹介したいと思います。実はとてもシンプルで、ほんの数文です。

1. Keep-alive は router-view と組み合わせて使用する必要があります。ここで注意すべき点は、keep-alive 自体は vue-router ではなく vue2.0 の機能であるため、vue1.0 ではサポートされていないことです。バージョン。 keep-alive の公式ドキュメントはこちらです。 Router-view の入り口に次のように実装されています

<template>
 <p id="app">

  <keep-alive>
   <router-view></router-view>
  </keep-alive>
  
  <!--这里是其他的代码-->
 </p>
</template>

2。これにより、コンポーネントのキャッシュが実現されます。キャッシュされますが、実際には、リストデータなど、一部のページは時間内に更新する必要があるため、すべてのページがコンポーネントを共有しているため、この共有コンポーネントを更新することはできません。キャッシュされていなければ、他のエントリがクリックされてしまいます。これらはすべて以前にキャッシュされたデータです。では、どのようにカスタマイズするのでしょうか? 次に、ルータービューに v-if 判定を追加し、ルーターによって定義されたファイルにキャッシュしたいページに「meta:{keepAlive:true}」を追加します。キャッシュが「meta:{keepAlive:false}」であるか、書き込まれていない場合のみ、キープアライブによって認識され、キャッシュされます。

<template>
 <p id="app">
  <!--缓存想要缓存的页面，实现后退不刷新-->
  <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
  <keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  
  <!--这里是其他的代码-->
 </p>
</template>

3. ルーターファイルにメタ判定を追加します

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;

Vue.use(Router)
export default new Router({
  {//home会被缓存
    path:"/home",
    component:home,
    meta:{keepAlive: true}
  }
  {//hello不会被缓存
    path:"/hello",
    component:hello,
    meta:{keepAlive: false}
  }
})

キャッシュが成功したかどうかを確認したい場合は、キャッシュが成功した場合、各コンポーネントの作成されたフックに出力フラグを出力できます。成功した場合は、初めてページにアクセスしたことを意味します。データをリクエストした場合、後で再度リクエストするのではなく、キャッシュを追加することで、データ処理におけるダメージを大幅に軽減できます。システムでは、データが大きすぎるため、毎回ページをリクエストするのは非常に困難です。問題は、キャッシュを使用したくない場合でも、キャッシュがリアルタイムで更新されることです。

Vue はキープアライブを使用して、インスタンス共有を更新せずにデータ キャッシュを実装します。

関連記事

Vue はキープアライブを使用して、インスタンス共有を更新せずにデータキャッシュを実装します。