<Suspense> Aguardar Dependências Assíncronas
Última atualização: 2026-10-22
<Suspense> Aguardar Dependências Assíncronas
O
| Grupo | Integrados |
|---|---|
| Tipo | Componente / Elemento |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
<Suspense>
<template #default><AsyncChild /></template>
<template #fallback><p>Carregando…</p></template>
</Suspense>⚙️ Argumentos
| props | #default (conteúdo assíncrono) / #fallback (mostrado durante a espera) |
|---|
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows 'Loading…' then swaps to 'Async content ready' after ~0.8s.💡 Pontos-chave
⚠️ Aviso Ainda é uma API experimental: a sintaxe pode mudar entre versões; avalie antes de usar em produção.
ℹ️ Nota Espera apenas as dependências assíncronas do primeiro nível; Suspense aninhados tratam cada um as suas próprias esperas.
💡 Dica Componentes assíncronos + Suspense é a combinação comum para lazy loading de rotas.
🏷️ Integrados relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença de um v-if com estado de loading?
R O Suspense detecta automaticamente quando o conteúdo assíncrono está pronto, sem gerenciar manualmente o estado de loading.
P Funciona com SSR?
R No servidor, aguarda o conteúdo assíncrono antes de gerar o HTML (requer suporte do framework); o cliente assume em seguida.
P Como tratar erros?
R Falhas assíncronas são capturadas com onErrorCaptured / errorHandler; o Suspense em si não trata erros.
