0Pricing
Frontend Academy · Aula

Componentes assíncronos e Suspense

Carregar componentes de forma preguiçosa com defineAsyncComponent, envolvê-los em e apresentar conteúdo alternativo enquanto o pacote do componente é carregado.

Componentes assíncronos e Suspense é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que usar componentes assíncronos?

Carregar componentes grandes ou raramente usados sob demanda, como um painel administrativo ou uma biblioteca de gráficos, mantém o pacote inicial pequeno. O defineAsyncComponent do Vue gerencia o ciclo de vida da importação dinâmica.

defineAsyncComponent

Passe uma função carregadora que retorna uma promessa resolvida com um componente. O Vue gerencia o carregamento, os erros e os tempos limite.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(
  () => import('./Dashboard.vue')
);

// Use it like a normal component:
<template>
  <Dashboard />
</template>

Configurando o comportamento assíncrono

Passe um objeto de opções para personalizar a interface de carregamento, a interface de erro, o atraso antes do carregamento e o tempo limite.

const Dashboard = defineAsyncComponent({
  loader: () => import('./Dashboard.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorPanel,
  delay: 200,    // ms before showing loading
  timeout: 5000  // ms before showing error
});

Divisão de blocos pelo empacotador

A importação dinâmica se torna um bloco separado na saída. Use comentários mágicos do Vite/webpack para definir nomes e fazer pré-busca.

const Dashboard = defineAsyncComponent(
  () => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);

Carregamento sob demanda no nível da rota

O Vue Router oferece suporte direto a componentes assíncronos nas definições de rotas.

const routes = [
  { path: '/',          component: () => import('./Home.vue') },
  { path: '/dashboard', component: () => import('./Dashboard.vue') },
  { path: '/admin',     component: () => import('./Admin.vue') }
];

Componente Suspense

O <Suspense> experimental do Vue renderiza um conteúdo alternativo enquanto qualquer dependência assíncrona em sua árvore estiver pendente.

<template>
  <Suspense>
    <template #default>
      <Dashboard />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

setup() assíncrono

setup() pode ser assíncrono — o Vue espera sua resolução antes de renderizar. Funciona dentro de Suspense.

<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>

<!-- Parent uses Suspense to handle the await -->

Tratamento de erros com onErrorCaptured

Use onErrorCaptured em um componente pai para capturar erros de componentes assíncronos ou de setup assíncrono.

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err, info);
  return false; // prevent propagation
});

Combinando Suspense e limite de erro

Envolva uma árvore de componentes assíncronos com Suspense, para o carregamento, e com um ancestral que capture erros.

<template>
  <ErrorBoundary>
    <Suspense>
      <template #default><Dashboard /></template>
      <template #fallback><Spinner /></template>
    </Suspense>
  </ErrorBoundary>
</template>

Suspense é experimental

A partir do Vue 3.4, <Suspense> ainda está marcado como experimental — a API pode mudar. Os próprios componentes assíncronos (defineAsyncComponent) são estáveis e estão prontos para produção.

Quando usar componentes assíncronos

Bons candidatos: componentes de rota, painéis administrativos e de configurações, modais abertos sob demanda e gráficos ou editores pesados. Evite usar para: componentes pequenos e componentes usados em todas as páginas, que devem ser divididos de outra forma.

Verificação rápida

Qual função do Vue 3 transforma uma importação dinâmica em um componente carregado sob demanda?

Recapitulação: componentes assíncronos e Suspense

defineAsyncComponent envolve importações dinâmicas para carregamento sob demanda. Configure loadingComponent, errorComponent, delay e timeout. Os empacotadores geram blocos separados. O carregamento sob demanda no nível da rota usa component: () => import('...'). <Suspense> renderiza um conteúdo alternativo enquanto as dependências assíncronas são resolvidas, mas ainda é experimental. setup() assíncrono com await no nível superior funciona dentro de Suspense. onErrorCaptured captura erros assíncronos.

Perguntas Frequentes

A aula “Componentes assíncronos e Suspense” é grátis?

Sim — o texto completo de “Componentes assíncronos e Suspense” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Componentes assíncronos e Suspense”?

Carregar componentes de forma preguiçosa com defineAsyncComponent, envolvê-los em e apresentar conteúdo alternativo enquanto o pacote do componente é carregado. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Componentes assíncronos e Suspense”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. provide() e inject() para injeção de dependências
  2. Componentes assíncronos e Suspense
  3. Diretivas personalizadas
  4. Sistema de plugins: app.use()
← Voltar para Frontend Academy