キープアライブの使用とそのライフサイクル

キープアライブ命令

キープアライブの機能は、コンポーネントの内部状態をキャッシュして、レンダリングの繰り返しを避けることです。

<keep-alive> タグは DOM 要素としてレンダリングされません。また、コンポーネントの親コンポーネントチェーンにも表示されません。

キープアライブの使用法

keep-alive は、キャッシュ用の対応するコンポーネントと一致する 3 つの属性をパラメータとして受け取ることができます。

include: 指定されたコンポーネントをキャッシュします。

exclude: 指定されたコンポーネントをキャッシュしません。

max: 最大数個のコンポーネントをキャッシュできます。

// 只缓存组件name为a和b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

ルーティングルーターと併用する

router-view もコンポーネントであり、keep-alive に直接含めると、一致するすべてのパスがキャッシュされます。使い方はキャッシュコンポーネントと同じです。

メタ属性を使用したルートのキャッシュ

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/user',
    name: 'user',
    component: User,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里组件会被缓存，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里组件不会被缓存，比如 User！ -->
</router-view>

キープアライブのライフサイクル

キープアライブが導入されると、最初にページに入ったときのフック関数のトリガーシーケンスは、作成 ➡️ マウント ➡️ アクティブ化となり、現在のページを終了するときに非アクティブ化がトリガーされます。再度このページに入ると、アクティブ化のみがトリガーされます。

Activated はページに入っている限りトリガーされますが、Mount は繰り返しトリガーされません。

ページに入るたびにいくつかのメソッドを実行する必要がある場合は、最も外側の層に <keep-alive> の層をラップして、ページに入るたびに実行したいメソッドが実行されるようにすることができます。一度実行してから、 mount に入れる必要がありますが、良い選択と見なすことができます。