Frontend Academy · Lektion

Asynkrone komponenter og Suspense

Indlæs komponenter lazy med defineAsyncComponent, omslut dem i , og vis reserveindhold, mens komponentbundtet indlæses.

Lektion 2 af 413 trin

Asynkrone komponenter og Suspense er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor asynkrone komponenter?

Ved at indlæse store eller sjældent brugte komponenter efter behov (f.eks. et administrationspanel eller et diagram-bibliotek) holdes den oprindelige pakke lille. Vues defineAsyncComponent håndterer livscyklussen for den dynamiske import.

defineAsyncComponent

Giv en indlæsningsfunktion videre, som returnerer et promise, der løses til en komponent. Vue håndterer indlæsning, fejl og tidsudløb.

import { defineAsyncComponent } from 'vue';

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

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

Konfiguration af asynkron adfærd

Giv et indstillingsobjekt videre for at tilpasse indlæsningsbrugerfladen, fejlbrugerfladen, forsinkelsen før indlæsning og tidsudløbet.

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

Opdeling i bundter i bundleren

Den dynamiske import bliver til en separat del i outputtet. Brug magiske kommentarer i Vite/webpack til navngivning og forhåndshentning.

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

Behovsstyret indlæsning på ruteniveau

Vue Router understøtter asynkrone komponenter direkte i rutedefinitioner.

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

Suspense-komponenten

Vues eksperimentelle <Suspense> viser en reservevisning, mens en asynkron afhængighed i komponenttræet afventer.

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

Asynkron setup()

setup() kan være asynkron — Vue venter på, at den bliver færdig, før komponenten renderes. Det fungerer inde i 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 -->

Fejlhåndtering med onErrorCaptured

Brug onErrorCaptured i en overordnet komponent til at fange fejl fra asynkrone komponenter eller asynkron setup.

import { onErrorCaptured } from 'vue';

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

Kombination af Suspense og fejlgrænse

Indkapsl et træ af asynkrone komponenter med både Suspense (til indlæsning) og en overordnet komponent, der fanger fejl (til fejl).

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

Suspense er eksperimentel

Fra og med Vue 3.4 er <Suspense> stadig markeret som eksperimentel — API'en kan ændre sig. Asynkrone komponenter selv (defineAsyncComponent) er stabile og klar til produktion.

Hvornår skal du bruge asynkrone komponenter?

Gode kandidater: rute-komponenter, administrations- og indstillingspaneler, modaler åbnet efter behov samt tunge diagrammer og redigeringsværktøjer. Undgå dem til: små komponenter og komponenter, der bruges på hver side (opdel dem på en anden måde).

Hurtigt tjek

Hvilken Vue 3-funktion omdanner en dynamisk import til en komponent, der indlæses efter behov?

Besvar den i den interaktive lektion

Opsummering: Asynkrone komponenter og Suspense

defineAsyncComponent pakker dynamiske importer ind til behovsstyret indlæsning. Konfigurér loadingComponent, errorComponent, delay og timeout. Bundlere udsender separate dele. Behovsstyret indlæsning på ruteniveau via component: () => import('...'). <Suspense> viser en reservevisning, mens asynkrone afhængigheder løses (stadig eksperimentel). Asynkron setup() med await på topniveau fungerer inde i Suspense. onErrorCaptured fanger asynkrone fejl.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Asynkrone komponenter og Suspense” gratis?

Ja — hele teksten til “Asynkrone komponenter og Suspense” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Asynkrone komponenter og Suspense”?

Indlæs komponenter lazy med defineAsyncComponent, omslut dem i , og vis reserveindhold, mens komponentbundtet indlæses. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Asynkrone komponenter og Suspense”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

provide() og inject() til dependency injection
Asynkrone komponenter og Suspense
Brugerdefinerede direktiver
Plugin-system: app.use()

← Tilbage til Frontend Academy