KeepAlive ​

<KeepAlive> es un componente integrado que nos permite cachear condicionalmente las instancias de los componentes cuando dinámicamente intercambiamos entre varios componentes.

Uso Básico ​

En el capítulo de Componentes Básicos, introdujimos la sintaxis de los Componentes Dinámicos, utilizando el elemento especial <component>:

<componente :is="activeComponent" />

Por defecto, una instancia de un componente activo se desmontará cuando se abandone. Esto hará que se pierda cualquier estado modificado que tenga. Cuando se vuelva a mostrar este componente, se creará una nueva instancia con sólo el estado inicial.

En el ejemplo siguiente, tenemos dos componentes con estado; A contiene un contador, mientras que B contiene un mensaje sincronizado con una entrada a través de v-model. Prueba a actualizar el estado de uno de ellos, cámbialo y luego vuelve a él:

Verás que cuando vuelvas a cambiar, el estado anterior cambiado se habrá restablecido.

La creación de una nueva instancia del componente al cambiar es un comportamiento normalmente útil, pero en este caso, nos gustaría que las dos instancias del componente se conservaran incluso cuando están inactivas. Para resolver este problema, podemos envolver nuestro componente dinámico con el componente integrado <KeepAlive>:

¡<!-- ¡Los componentes inactivos se guardarán en la caché! -->
<KeepAlive>
  <componente :is="activeComponent" />
</KeepAlive>

Ahora, el estado será persistente a través de los cambios de componentes:

Include / Exclude ​

Por defecto, <KeepAlive> almacenará en caché cualquier instancia que se encuentre dentro del componente. Podemos personalizar este comportamiento a través de las props include y exclude. Ambas props pueden ser un string delimitado por comas, una RegExp o un array que contenga cualquiera de los dos tipos:

<!-- string delimitado por comas -->
<KeepAlive include="a,b">
  <componente :is="view" />
</KeepAlive>

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

<!-- Array (utiliza `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <componente :is="view" />
</KeepAlive>

La verificación de la coincidencia se realiza con la opción name del componente, por lo que los componentes que necesiten ser cacheados condicionalmente por KeepAlive deben declarar explícitamente una opción name.

Instancias Máximas en Caché ​

Podemos limitar el número máximo de instancias del componente que pueden ser almacenadas en caché a través de la proposición max. Cuando se especifica max, <KeepAlive> se comporta como una caché LRU: si el número de instancias en caché está a punto de exceder el número máximo especificado, la instancia en caché a la que se haya accedido menos recientemente será destruida para hacer sitio a la nueva.

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

Ciclo de Vida de la Instancia en Caché ​

Cuando se elimina una instancia de un componente del DOM pero esta forma parte de un árbol de componentes almacenado en caché por <KeepAlive>, pasa a un estado desactivado en lugar de ser desmontado. Cuando se inserta una instancia de componente en el DOM como parte de un árbol en caché, esta es activada.

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

onActivated(() => {
  // llamado en el montaje inicial
  // y cada vez que se reinserta desde la caché
})

onDeactivated(() => {
  // llamado cuando se retira desde el DOM a la caché
  // y también cuando se desmonta
})
</script>

export default {
  activated() {
    // llamado en el montaje inicial
    // y cada vez que se reinserta desde la caché
  },
  deactivated() {
    // llamado cuando se retira desde el DOM a la caché
    // y también cuando se desmonta
  }
}

Observa que:

onActivatedactivated también es llamado al momento del montaje, y onDeactivateddeactivated al momento del desmontaje.

• Los dos hooks funcionan no sólo para el componente raíz cacheado por <KeepAlive>, sino también para los componentes descendientes en el árbol cacheado.

Relacionado

• Referencia de la Api sobre <KeepAlive>