Utilisation du keep-alive et son cycle de vie

instructions de maintien en vie

La fonction de keep-alive est de mettre en cache l'état interne du composant pour éviter un rendu répété.

La balise <keep-alive> n'est pas rendue en tant qu'élément DOM. Il n'apparaîtra pas non plus dans la chaîne de composants parent du composant.

Utilisation du keep-alive

keep-alive peut recevoir trois attributs en tant que paramètres, correspondant aux composants correspondants pour la mise en cache :

1. include : met en cache le composant spécifié.

2. exclure : ne met pas en cache le composant spécifié.

3. max : jusqu'à plusieurs composants peuvent être mis en cache.

// 只缓存组件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>

Utiliser avec un routeur de routage

router-view est également un composant. S'il est directement inclus dans keep-alive, tous les chemins correspondants seront mis en cache. L'utilisation est la même que pour le composant de cache.

Mise en cache des routes à l'aide des méta-attributs

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>

Le cycle de vie du keep-alive

1. Lorsque le keep-alive est introduit, la page entre pour la première fois, la séquence de déclenchement de la fonction hook est : créée ➡️ montée ➡️ activée, et désactivée est déclenchée à la sortie de la page en cours. Lorsque vous entrez à nouveau dans cette page, seul activé est déclenché.

2. Activé sera déclenché tant que vous entrez dans la page, mais monté ne sera pas déclenché à plusieurs reprises.

3. Si vous avez besoin d'exécuter certaines méthodes à chaque fois que vous entrez dans la page, vous pouvez envelopper une couche de <keep-alive> dans la couche la plus externe afin que la méthode que vous souhaitez exécuter soit exécutée à chaque fois que vous entrez dans la page. besoin de l'exécuter une fois, puis de le mettre dans monté , peut être considéré comme un bon choix.