vue3プロジェクトでkeepAliveを使う方法を詳しく解説

この記事では、Vue プロジェクトでキープアライブを使用する方法について詳しく説明します。キープアライブは Vue の組み込みコンポーネントです。その機能は、メモリの取得を消費する DOM の繰り返しレンダリングを防ぐためにコンポーネントをメモリにキャッシュすることです。スピード。みんなが助けてくれることを願っています。

一般的な使用法はコンポーネントまたはルートをキャッシュすることですが、既存の使用法である vue2.x と vue3.x の間にはいくつかの違いがあります。以下ではvue3.0におけるkeepalievの使い方を中心に説明します。

通常、ページ キャッシュ全体を構成することも、特定のコンポーネントのみがキャッシュ情報を維持できるようにすることもできます。キープアライブ ルートまたはコンポーネントが構成されている場合、作成 ->マウントされたライフ サイクルは、ページが更新されたときにのみ実行されます。第 1 章 2 回目以降にページに入るときは、ライフサイクルは変更されませんが、キャッシュ情報が読み込まれます。

1. ルーター構成キャッシュ

1)ステップ 1: App.vue の構成
vue2.x と vue3.0 があります。 App.vue 設定の違い App.vue 設定情報は次のとおりです:
vue2.x では、次のように、router-view を完全にキープアライブに配置できます:

<template>
	<!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/></template>

App.vue 設定vue3.0 メソッドは次のとおりです。

<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> </template>

ここでコンポーネントは vue の特別なコンポーネントです。:is は指定されたコンポーネントをバインドするために使用されます。ここではルートに対応するページ バインディングです。

2) 2 番目のステップ: メタ属性の追加
次のように、対応するルートにメタ属性を追加して、ページでキャッシュを使用するかどうかを設定します。これにより、ページの単純なキャッシュを実現できますが、一部のシナリオでは複雑な処理が必要になります。たとえば、ページ上の一部の情報はキャッシュから読み取る必要がなく、入力されるたびに処理する必要があります。アクティブ化されたライフ サイクルを使用して、部分的なページ更新の問題を解決できます。

3)

部分的なページの更新を実現する

まず、vue のライフ サイクル、keepAlive でラップされたページのライフ サイクル、ページが更新されたときに実行されるライフ サイクルを理解します。入力された内容は ：
created->mounted->activated; このうち、created->mounted は初めてページに入ったときのみ実行され、アクティブ化されたライフサイクルはページが入るたびに実行されます (特に keepAlive の場合)。ライフサイクルなので、ページが入るたびに実行される操作をこのライフサイクルに入れることができます。 次のコード:

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },

実装された関数は、ユーザーが入力するたびに動的検証コードを空に設定することです。この関数は、コンポーネントをコンポーネントの外に出すなど、他の方法でも実装できます。キャッシュ (「2. コンポーネント構成キャッシュ」を参照)。
4)

ルーティング キープアライブ属性の動的設定

キープアライブ キャッシュを使い果たした後、ページのキャッシュをもうやめたり、次のページのキープアライブを設定したくなる場合があります。この時点では、meta の keepAlive 値を変更してページ キャッシュを削除できます。beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave を使用します。使用方法は次のとおりです:

activated() {
	// 页面每次进入将手机动态验证码置为空
   this.$refs.mobPwdCode.inputValue = '';},

2. コンポーネント設定キャッシュ

1) 使用シナリオ

通常、Vue のページをキャッシュしますが、ページの特定のコンポーネントのみをキャッシュする必要がある場合や、動的コンポーネントを使用するときにコンポーネントをキャッシュする必要がある場合があります。コンポーネントコンポーネントを使用してコンポーネントを切り替えます。

2) キャッシュページ指定コンポーネント

App.vueで使用する場合、すべてのルートに対応するページがプロジェクトに対応するコンポーネントとなります。 keep-alive 次のように、コンポーネントの include または exclude 属性を使用します: include

を使用して、testKA という名前のコンポーネントをキャッシュします。

// to为即将跳转的路由，from为上一个页面路由beforeRouteLeave(to, from,+ next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false;
    next();}

ルーターに対応するページで、name 属性を設定する必要があります

// APP.vue文件，将页面作为组件缓存<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive></router-view>

さらに、include の使用法は次のとおりです。

export default {
    name:'testKA',// keep-alive中include属性匹配组件name
    data() {return {}},
    activated() {
        // keepalive缓存的页面每次进入都会进行的生命周期
    },}

exclude の使用法は include の使用法と同じで、キャッシュされないコンポーネントを表します。さらに、キープアライブには、キャッシュされたコンポーネントの最大数を表す max 属性もあり、この数に達すると、新しいインスタンスが作成される前に、最も長い時間アクセスされていないキャッシュされたコンポーネントのインスタンスが破棄されます。作成した。

<!-- 逗号分隔字符串 --><keep-alive include="a,b">
  <component :is="view"></component></keep-alive><!-- 正则表达式 (使用 `v-bind`) --><keep-alive :include="/a|b/">
  <component :is="view"></component></keep-alive><!-- 数组 (使用 `v-bind`) --><keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component></keep-alive>

特定のページでのコンポーネントの切り替えに使用する場合、使用法はキャッシュ ルーティングと同じですが、ページをコンポーネントにダウングレードするだけで、親コンポーネントは App.vue から対応するルーティングにダウングレードされます。ページ。

3) 概要

実際の戦闘プロセスでは、キープアライブ キャッシュ コンポーネントが見つかった場合、アプリの include 属性を使用するなど、レベルをまたいで

を使用することはできません。 .vue for name= 「a」が一致する場合、キャッシュ名「a」のサブコンポーネント (ルーティング ページ) のみと一致しますが、名前「a」の孫コンポーネント (サブページによって参照されるコンポーネント) はキャッシュできません。 。

孫コンポーネントをキャッシュする場合は、サブコンポーネント全体をキャッシュするか、サブコンポーネントでキープアライブを使用できます。キープアライブの使用手順については、公式 Web サイトにアクセスして学習できます: https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive

[関連する推奨事項:「vue.js チュートリアル

」]

以上がvue3プロジェクトでkeepAliveを使う方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。