KeepAlive #

<KeepAlive> est un composant natif qui nous permet de garder en cache des instances d'un composant de manière conditionnelle tout en switchant entre plusieurs composants de manière dynamique.

Utilisation basique #

Dans le chapitre sur les principes fondamentaux des composants, nous avons présenté la syntaxe pour les Composants Dynamiques, en utilisant l'élément spécial <component> :

<component :is="activeComponent" />

Par défaut, une instance du composant actif est démontée lorsqu'on le change. Cela entraîne la perte de tout état modifié qu'elle comporte. Lorsque ce composant est affiché à nouveau, une nouvelle instance sera créée avec uniquement l'état initial.

Dans l'exemple ci-dessous, nous avons deux composants ayant un état - A contient un compteur, tandis que B contient un message synchronisé avec une entrée via v-model. Essayez de mettre à jour l'état de l'un d'entre eux, changez de page, puis revenez :

Vous remarquerez qu'au retour, l'état modifié précédent a été réinitialisé.

La création d'une nouvelle instance de composant lors du changement est normalement un comportement utile, mais dans ce cas, nous aimerions vraiment que les deux instances de composant soient préservées même lorsqu'elles sont inactives. Pour résoudre ce problème, nous pouvons envelopper notre composant dynamique avec le composant natif <KeepAlive> :

<!-- Les composants inactifs seront mis en cache ! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Maintenant, l'état sera persistant à travers les changements de composants :

Include / Exclude #

Par défaut, <KeepAlive> va mettre en cache toute instance de composant qu'il contient. Nous pouvons personnaliser ce comportement via les props include et exclude. Ces deux options peuvent être une chaîne de caractères délimitée par des virgules, une RegExp, ou un tableau contenant l'un ou l'autre type :

<!-- chaîne de caractères délimitée par des virgules -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (utilisez `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Tableau (utilisez `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

La correspondance se fait par rapport à l'option name du composant, de sorte que les composants qui doivent être mis en cache de manière conditionnelle par KeepAlive doivent déclarer explicitement une option name.

Maximum d'instances mises en cache #

Nous pouvons limiter le nombre maximum d'instances de composants qui peuvent être mises en cache via la prop max. Lorsque max est spécifié, <KeepAlive> se comporte comme un cache LRU : si le nombre d'instances mises en cache est sur le point de dépasser le nombre maximum spécifié, l'instance mise en cache la moins récemment activée sera détruite pour faire place à la nouvelle.

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

Cycle de vie des instances mises en cache #

Lorsqu'une instance de composant est supprimée du DOM mais fait partie d'un arbre de composants mis en cache par <KeepAlive>, elle passe dans un état désactivé au lieu d'être démontée. Lorsqu'une instance de composant est insérée dans le DOM en tant que partie d'un arbre mis en cache, elle est activée.

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // appelé au premier montage
  // et à chaque fois qu'il est réinséré depuis le cache
})

onDeactivated(() => {
  // appelé lorsqu'il est retiré du DOM et mis en cache
  // et également lorsqu'il est démonté
})
</script>

export default {
  activated() {
    // appelé au premier montage
    // et à chaque fois qu'il est réinséré depuis le cache
  },
  deactivated() {
    // appelé lorsqu'il est retiré du DOM et mis en cache
    // et également lorsqu'il est démonté
  }
}

Notez que :

• onActivatedactivated est également appelé au montage, et onDeactivateddeactivated au démontage.

• Les deux hooks fonctionnent non seulement pour le composant racine mis en cache par <KeepAlive>, mais aussi pour les composants enfants dans l'arbre mis en cache.

Référence

• Référence de l'API <KeepAlive>