defineAsyncComponent() Definir um componente assíncrono
Última atualização: 2026-10-22
defineAsyncComponent() Definir um componente assíncrono
defineAsyncComponent() cria um componente carregado sob demanda na primeira renderização — para lazy loading em nível de rota e de componentes pesados.
| Grupo | API Global |
|---|---|
| Tipo | API |
| Escopo | Global |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const Editor = defineAsyncComponent(() => import("./Editor.vue"))
// com fallbacks de carregamento e de erro
const Panel = defineAsyncComponent({
loader: () => import("./Panel.vue"),
loadingComponent: Spinner,
errorComponent: ErrorBox,
delay: 200
})⚙️ Argumentos
| loader | options | Um loader que retorna uma Promise, ou um objeto de opções |
|---|
Retorno：Um componente assíncrono que carrega na primeira renderização
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
'Lazy component ready' appears after about 0.8s.💡 Pontos-chave
💡 Dica O lazy loading em nível de rota traz o maior ganho.
ℹ️ Nota delay evita flicker de carregamento; timeout limita a espera.
⚠️ Aviso Mantenha o componente vivo com KeepAlive para preservar o estado.
🏷️ API Global relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Relação com o import() dinâmico?
R Ele encapsula o import() com fallbacks de carregamento e de erro.
P Quando o carregamento começa?
R Na primeira renderização; renderizações seguintes reutilizam o módulo em cache.
P Funciona com Suspense?
R Sim — o Suspense pode assumir o estado de espera.
