Mettre en cache une instance de composant

"KeepAlive" est un composant "built-in" de Vue.js qui permet de mettre en cache une instance de composant lorsqu'on "switche" entre plusieurs composants.

Avec cette notation, on peut utiliser des composants dynamiques :

<component :is="activeComponent"></component>

La propriété “is” contient le nom du composant en chaîne de caractères ou le composant importé.
Lorsque "is" change, le composant change. Le composant actif qui devient inactif est "unmounted" et n'importe quelle valeur de son “state” est perdue. Lorsqu'il redeviendra actif, une nouvelle instance de ce composant sera créée.

Par ex: Composant A: contient un “count” Composant B: contient un input "message"

Lorsqu’on passe du composant A au composant B, on perd la valeur du "count". Lorsqu’on passe du composant B au composant A, on perd la valeur du message.

Pour éviter de perdre les valeurs du “state” du composant inactif, on peut utiliser le composant “KeepAlive”: