キープアライブ属性とライフサイクル

生き続ける

小道具の使用

• include-stringまたは正規表現。名前が一致するコンポーネントのみがキャッシュされます。
• exclude-stringまたは正規表現。名前が一致するコンポーネントはキャッシュされません。
• 最大数。キャッシュできるコンポーネントインスタンスの最大数。

<keep-alive>パーセル動的コンポーネント、コンポーネントのインスタンスではなく、それらを破壊するよりも、非アクティブキャッシュ
コンポーネントを含めて、切り替えられたとき、そのactivatedやdeactivatedフック関数に対応する二つのライフサイクルが実行されます

アプリケーションシナリオ

主要用于保留组件状态或避免重新渲染。

<keep-alive include="test-keep-alive">
//将缓存name为test-keep-alive的组件
    <component></component>
</keep-alive>

<keep-alive include="a,b">
//将缓存name为a或者b的组件，结合动态组件使用
    <component :is="view"></component>
</keep-alive>

<keep-alive :include="/a|b/">
//使用正则表达式，需使用v-bind
    <component :is="view"></component>
</keep-alive>

<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

router-viewで使用します

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
//router.js
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
    
    
        keepAlive: false // 不需要缓存
      }
    },
    {
    
    
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
    
    
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

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

activated：ページが最初に入力されたとき、フックがトリガーされる順序は次のとおりです。created->mounted->activated->deactivated

ページが終了したdeactivatedときにトリガーされ、ページが再び前後に移動したときにのみトリガーされますactivated