Attributs de maintien en vie et cycle de vie

rester en vie

Utilisation d'accessoires

• include-string ou expression régulière. Seuls les composants avec des noms correspondants seront mis en cache.
• exclude-string ou expression régulière. Tous les composants avec des noms correspondants ne seront pas mis en cache.
• nombre-max. Le nombre maximal d'instances de composant pouvant être mises en cache.

<keep-alive>Composants dynamiques de parcelle, les instances de composant mettent en cache inactives, plutôt que de les détruire
lorsque le composant est commuté, y compris son activatedet deactivatedles deux cycles de vie correspondant à la fonction de crochet seront exécutés

Scénario d'application

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

<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>

Utiliser avec la vue du routeur

<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 // 需要被缓存
      }
    }
  ]
})

Cycle de vie Keep-Alive

activated: Lors de la première entrée de la page, l'ordre dans lequel les hooks sont déclenchés estcreated->mounted->activated->deactivated

Il sera déclenché deactivatedà la sortie de la page , et uniquement lorsqu'elle avance ou recule de nouveauactivated