Dans Vue, un composant qui disparaît est détruit, et ses données sont perdues. Pour éviter cela, le composant intégré <KeepAlive> met en cache les composants qu’il enveloppe au lieu de les supprimer.
Pour dynamiser des applications ou des composants sur le web, Vue propose la directive v-if, qui fait apparaître ou disparaître un bloc de contenu. Lorsqu’un composant disparaît de cette façon, Vue le détruit. Ses données sont alors perdues, ce qui est voulu pour libérer la mémoire, et il repart de zéro s’il revient.
Ce fonctionnement pose problème avec des onglets. Une saisie commencée dans le premier onglet s’efface dès qu’on consulte le deuxième, et ainsi de suite.
<KeepAlive> modifie ce comportement. Dans l’exemple d’une recette, si l’on saisit des informations dans l’onglet Ingrédients, qu’on passe à Préparation puis qu’on revient, ces informations sont conservées. Sans <KeepAlive>, le formulaire serait entièrement retiré du DOM puis recréé, et le champ reviendrait à sa valeur initiale. Le composant n’étant pas reconstruit, l’affichage est plus rapide, mais il reste en mémoire, ce qui alourdit l’ensemble. La balise <component :is> affiche quant à elle le composant choisi dynamiquement. <KeepAlive> fonctionne aussi autour d’un bloc v-if / v-else, à condition de n’accepter qu’un seul enfant direct à la fois.
Hooks onActivated et onDeactivated
Pour déclencher d’autres actions en JavaScript lorsqu’un composant est affiché ou mis de côté, les hooks onMounted et onUnmounted ne suffisent plus. Un composant en cache n’est ni démonté ni remonté dans le DOM, ces hooks ne sont donc appelés qu’une seule fois. Deux autres hooks prennent alors le relais.
Le hook onActivated est appelé au premier affichage, puis à chaque retour. Le hook onDeactivated est appelé à chaque fois que le composant est mis de côté. C’est à ce moment qu’on peut mettre en pause ce qui ne doit pas tourner en arrière-plan, comme une vidéo, un minuteur ou un rafraîchissement automatique, puis le relancer au retour. On peut aussi y rafraîchir des données devenues anciennes.
Choisir ce qui est gardé en cache
Chaque composant gardé en cache occupe de la mémoire, avec tout son DOM. Si le composant est léger, cette charge reste acceptable. Si le DOM est très lourd, Vue prévoit trois props pour contrôler le cache plus finement.
Les props include et exclude désignent les composants par leur nom. Avec la syntaxe <script setup>, ce nom est déduit du nom du fichier, par exemple OngletAvis pour OngletAvis.vue. La prop max limite le nombre d’instances en cache. Au-delà de cette limite, le composant le moins récemment utilisé est détruit. Avec :max= »2″, en visitant Ingrédients, puis Préparation, puis Avis, c’est Ingrédients qui sort du cache.
Avec Vue Router
Un cas d’usage fréquent concerne une liste de résultats filtrée. On consulte le détail d’un élément, on revient, et la liste a perdu ses filtres et sa position. Avec Vue Router, <RouterView> donne accès au composant de la page courante par son slot, qu’il suffit d’envelopper dans un <KeepAlive>.
Combiné avec include, ce mécanisme ne garde que les pages qui le méritent, comme la liste de résultats ou un formulaire long. Il ne faut pas mettre en cache toutes les pages visitées, sans quoi le cache grossit rapidement.
