Vue のキープアライブ コンポーネントを使用してページレベルのキャッシュを実装する方法

vue のキープアライブ コンポーネントを使用してページ レベルのキャッシュを実装する方法

はじめに:
Vue を開発に使用する場合、読み込み速度を向上させるためにページをキャッシュする必要がある状況によく遭遇します。ページとユーザーエクスペリエンス。 Vue のキープアライブ コンポーネントは、ページ レベルのキャッシュの実装に役立ち、特定のページが切り替え時に状態とデータを保持できるようになります。この記事では、Vue のキープアライブ コンポーネントを使用してページレベルのキャッシュを実装する方法を紹介します。

1. Keep-alive コンポーネントの紹介
   keep-alive は Vue によって提供される抽象コンポーネントであり、他のコンポーネントをキャッシュするために使用されます。キャッシュする必要があるコンポーネントをキープアライブ タグでラップすることで、これらのコンポーネントをキャッシュし、切り替え時に再利用できます。
2. キープアライブの使用方法
   Vue でキープアライブ コンポーネントを使用するのは非常に簡単です。キャッシュする必要があるコンポーネントの外側に 7c9485ff8c3cba5ae9343ed63c2dc3f7 タグを追加するだけです。キャッシュする必要があるコンポーネントを指定するだけです。例:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<keep-alive>
  <router-view></router-view>
</keep-alive>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

in上記のコードでは、975b587bf85a482ea10b0a28848e78a4 コンポーネントがキャッシュされます。

3. キープアライブ ライフ サイクル メソッド
   キープアライブ コンポーネントを使用する場合、キャッシュされたコンポーネントのライフ サイクルを制御する必要がある場合があります。 Vue には、アクティブ化と非アクティブ化という 2 つのライフサイクル関数が用意されており、キャッシュ状態とアクティブ化状態の間でコンポーネントの動作を制御するために使用されます。

activated: コンポーネントがアクティブ化されたときに呼び出されます。つまり、コンポーネントがキャッシュからアクティブ化された状態に移行したときに呼び出されます。
deactivated: コンポーネントがキャッシュされるときに呼び出されます。つまり、アクティブ化からキャッシュされた状態に戻るときに呼び出されます。

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<keep-alive>
  <router-view v-on:activated="onActivated"
               v-on:deactivated="onDeactivated">
  </router-view>
</keep-alive>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {
メソッド: {

onActivated() {
  // 组件被激活时的逻辑处理
},
onDeactivated() {
  // 组件被缓存时的逻辑处理
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記のコードでは、975b587bf85a482ea10b0a28848e78a4 コンポーネントに active を追加し、非アクティブ化されたイベントは、コンポーネントがアクティブ化されてキャッシュされたときにイベントをリッスンし、対応するメソッドで論理処理を実行します。

4. ページをキャッシュする
   キープアライブ コンポーネントを使用する場合、ルーティング設定にメタ フィールドを追加することで、どのページをキャッシュするかを制御できます。例:

const Routes = [
{

path: '/',
name: 'Home',
component: Home,
meta: { keepAlive: true } // 需要进行缓存

},
{

path: '/about',
name: 'About',
component: About,
meta: { keepAlive: false } // 不需要进行缓存

}
]

上記のコードでは、ホームページにメタ フィールドを追加し、ページをキャッシュする必要があることを意味する keepAlive: true に設定しました。About ページについては、キャッシュしないことを意味する keepAlive: false に設定しました。キャッシュする必要があります。

次に、975b587bf85a482ea10b0a28848e78a4 コンポーネントの v-bind 命令を通じてメタ フィールドをキープアライブ コンポーネントに渡し、キープアライブ コンポーネント内で v-if を使用してコンポーネントをキャッシュします。判定とキャッシュ:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<keep-alive>
  <router-view v-bind:keep-alive="meta.keepAlive"></router-view>
</keep-alive>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

上記のコードでは、v-bind を介して meta.keepAlive フィールドをキープアライブ コンポーネントに渡し、キープアライブ コンポーネント内で v-if を使用してキャッシュ コンポーネントが必要かどうかを判断します。

5. 例
   次は、ページ レベルのキャッシュにキープアライブ コンポーネントを使用する方法を示す簡単なコード例です。

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<keep-alive>
  <router-view v-bind:keep-alive="meta.keepAlive"></router-view>
</keep-alive>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
デフォルトのエクスポート {
計算結果: {

meta() {
  const matchedRouter = this.$route.matched[0];
  return matchedRouter.meta;
}

}
}
2cacc6d41bbb37262a98f745aa00fbf0

上記の例では、計算された属性を通じて現在のルートに対応するメタ フィールドを取得し、それをキープアライブ コンポーネントに渡します。 vバインド。このようにして、ルーティング設定のメタフィールドに基づいてページのキャッシュを制御できます。

概要:
Vue のキープアライブ コンポーネントを通じて、ページ レベルのキャッシュを実現し、ページの読み込み速度とユーザー エクスペリエンスを向上させることができます。キャッシュする必要があるコンポーネントと、キャッシュとアクティブ化ステータスをリッスンするライフサイクル メソッドを設定することで、キャッシュされたコンポーネントの動作をより柔軟に制御できます。この記事が、Vue のキープアライブ コンポーネントの理解と適用に役立つことを願っています。

以上がVue のキープアライブ コンポーネントを使用してページレベルのキャッシュを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。