Preservação de Componente ​

O <KeepAlive> é um componente embutido que permite-nos condicionalmente guardar para consulta imediata as instâncias de componente quando mudamos dinamicamente entre vários componentes.

Utilização Básica ​

No capítulo de Fundamentos de Componente, introduzimos a sintaxe para Componentes Dinâmicos, utilizando o elemento especial <component>:

<component :is="activeComponent" />

Por padrão, uma instância de componente ativa será desmontada quando mudamos para outra instância de componente. Isto causará que qualquer estado mudado que ele segura ser perdido.

No exemplo abaixo, temos dois componentes com conteúdo - (A) contém um contador, enquando (B) contém uma messagem síncronizada com uma entrada através v-model. Tente atualizar o estado de um deles, mude para outro, e então mude de volta para ele:

Notarás que quando mudado de volta, o anterior estado mudado teria sido reiniciado.

A criação de nova instância de componente na troca é um comportamente normalmente útil, mas neste caso, gostariamos muito que as duas instâncias de componente sejam preservadas mesmo quando estiverem inativas. Para solucionar este problema, podemos envolver o nosso componente dinâmico com o componente embutido <KeepAlive>:

<!-- Os componentes inativos serão cacheados! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Agora, o estado será persistido através das mudanças de componente:

Incluir / Excluir ​

Por padrão, <KeepAlive> cacheará qualquer instância de componente no lado de dentro. Nós podemos personalizar este comportamento através das propriedades include e exclude. Ambas propriedades podem ser uma sequência de caracteres delimitada por vírgula, uma RegExp (Expressão Regular), ou arranjo contendo quaisquer tipos:

<!-- sequência de caracteres delimitada por vírgula -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- expressão regular (ou regex) (utilize `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

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

A correspondência é verificada contra a opção name do componente, assim os componentes que precisam ser cacheados condicionalmente pelo KeepAlive devem declarar de maneira explícita uma opção name.

Máximo de Instâncias Cacheadas ​

Nós podemos limitar o número máximo de instâncias de componente que podem ser cacheadas através da propriedade max. Quando max é especificada, <KeepAlive> comporta-se como um cache de LRU: se o número de instâncias cacheadas exceder a contagem máxima especidada, a menor instância cacheada acessada recentemente será destruída para arranjar espaço para uma nova.

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

Ciclo de Vida da Instância Cacheada ​

Quando uma instância de componente for removida do DOM mas for parte de uma árvore de componente cacheada pelo <KeepAlive>, ele entra em um estado desativado no lugar de ser desmontada. Quando uma instância de componente for inserida no DOM como parte de uma árvore cacheada, ele é ativado.

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

onActivated(() => {
  // chamada na montagem inicial
  // e toda vez que ela for inserida novamente do cache
})

onDeactivated(() => {
  // chamada quando removida do DOM para o cache
  // e tamém quando desmontada
})
</script>

export default {
  activated() {
    // chamada na montagem inicial
    // e toda vez que ela for inserida novamente do cache
  },
  deactivated() {
    // chamada quando removida do DOM para o cache
    // e tamém quando desmontada
  }
}

Nota que:

• onActivatedactivated é também chamada na montagem, e onDeactivateddeactivated na desmontagem.

• Ambos gatilhos funcionam para não apenas o componente de raiz cacheado pelo <KeepAlive>, mas também para componentes descendentes na árvore cacheada.

Relacionado a

• Referência de API de <KeepAlive>