KeepAlive ​

<KeepAlive> es un componente incorporado que nos permite almacenar en caché condicionalmente instancias de componente al cambiar dinámicamente entre múltiples componentes.

Uso Básico ​

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

<component :is="activeComponent" />

Por defecto, una instancia de componente activa será desmontada cuando se cambie a otro. Esto hará que cualquier estado modificado que contenga se pierda. Cuando este componente se muestre de nuevo, se creará una nueva instancia con solo el estado inicial.

En el ejemplo siguiente, tenemos dos componentes con estado: A contiene un contador, mientras que B contiene un mensaje sincronizado con un input a través de v-model. Intenta actualizar el estado de uno de ellos, cambia a otro y luego vuelve a él:

Notarás que cuando se vuelve a él, el estado modificado anterior se habrá restablecido.

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

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

Ahora, el estado persistirá a través de los cambios de componente:

Incluir / Excluir ​

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

<!-- cadena delimitada por comas -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

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

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

La coincidencia se comprueba con la opción name del componente, por lo que los componentes que necesiten ser almacenados en caché condicionalmente por KeepAlive deben declarar explícitamente una opción name.

Máximo de Instancias Almacenadas en Caché ​

Podemos limitar el número máximo de instancias de componente que pueden ser almacenadas en caché a través de la prop max. Cuando se especifica max, <KeepAlive> se comporta como una caché LRU: si el número de instancias almacenadas en caché está a punto de exceder el recuento máximo especificado, la instancia almacenada en caché menos recientemente accedida será destruida para dejar espacio a la nueva.

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

Ciclo de Vida de una Instancia Almacenada en Caché ​

Cuando una instancia de componente se elimina del DOM pero forma parte de un árbol de componentes almacenado en caché por <KeepAlive>, pasa a un estado de desactivado en lugar de ser desmontada. Cuando una instancia de componente se inserta en el DOM como parte de un árbol en caché, 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 elimina del DOM y se pone en 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 elimina del DOM y se pone en la caché
    // y también cuando se desmonta
  }
}

Ten en cuenta que:

• onActivatedactivated también se llama en el montaje, y onDeactivateddeactivated en el desmontaje.

• Ambos hooks funcionan no solo para el componente raíz almacenado en caché por <KeepAlive>, sino también para los componentes descendientes en el árbol en caché.

Relacionado

• Referencia de <KeepAlive> de la API