<KeepAlive> Cache de Instâncias de Componentes
Última atualização: 2026-10-22
<KeepAlive> Cache de Instâncias de Componentes
O
| Grupo | Integrados |
|---|---|
| Tipo | Componente / Elemento |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<KeepAlive include="TabA,TabB" :max="10">
<component :is="currentTab"></component>
</KeepAlive>⚙️ Argumentos
| props | include / exclude (nomes ou regex) / max (limite de cache; ao exceder, elimina o menos usado) |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Type in tab A, switch away and back — the text remains.💡 Pontos-chave
💡 Dica Combine com os hooks activated / deactivated para 'atualizar ao entrar, pausar ao sair'.
ℹ️ Nota max usa eliminação LRU: ao exceder o limite, a instância menos acessada recentemente é destruída primeiro.
⚠️ Aviso O que fica em cache são instâncias e estados (inclusive timers): manter páginas inativas em cache consome memória; defina um limite com max.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença em relação ao v-show?
R O v-show esconde o DOM mantendo-o; o KeepAlive cacheia a instância inteira do componente (estado e efeitos colaterais).
P Como usar o include?
R Nomes separados por vírgula ou regex: :include="/Tab/"; o que é comparado é o name do componente.
P O cache fica guardado para sempre?
R Por padrão, não há limite; controle com :max ou use uma lista branca com include/exclude.
