Vue Academy · Lektion

Asynkrone komponenter med defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent samt indstillingerne delay og timeout

Lektion 2 af 413 trin

Asynkrone komponenter med defineAsyncComponent er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvorfor asynkrone komponenter

defineAsyncComponent lader dig indlæse en komponent efter behov — dens kode hentes først, når komponenten gengives første gang.

Det muliggør kodeopdeling på rute- og komponentniveau, så den indledende pakke bliver mindre, og den første visning bliver hurtigere.

Formen med en loader-funktion

Den enkleste anvendelse sender en loader-funktion, der returnerer en dynamisk import(). Vite/webpack opdeler automatisk denne import i sit eget kodebid.

<script setup>
import { defineAsyncComponent } from 'vue'

const SettingsModal = defineAsyncComponent(() =>
  import('./SettingsModal.vue')
)
</script>

<template>
  <SettingsModal v-if="showSettings" />
</template>

Formen med options-objektet

Du kan få mere detaljeret kontrol ved at sende et options-objekt. De vigtigste felter er:

loader — funktionen til dynamisk import
loadingComponent — vises under indlæsning
errorComponent — vises, hvis indlæsningen mislykkes
delay / timeout — tidsstyring

import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

delay: Undgå blinkende indlæsningsindikator

Indstillingen delay (standardværdien er 200 ms) angiver, hvor længe Vue venter, før loadingComponent vises. Hvis kodebidet indlæses hurtigere end forsinkelsen, vises der slet ingen indlæsningsindikator.

Sæt delay: 0 for at vise indlæsningstilstanden med det samme.

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: Fejl ved langsom indlæsning

Indstillingen timeout angiver den maksimale ventetid. Hvis loaderen ikke afsluttes inden for timeout ms, vises errorComponent, og en fejl logges.

Som standard er der ingen timeout — indlæsningen venter på ubestemt tid.

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

onError-callbacket

Håndteringen onError kører, når loaderen afvises. Den modtager fejlen, en funktion til genforsøg, en funktion til at give op og det aktuelle antal forsøg.

Her implementerer du logik for genforsøg med en grænse ved ustabile netværk.

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

Valget mellem retry og fail

Inde i onError skal du kalde præcis én af retry() eller fail() (eller ingen af dem, hvilket også giver fejl). En almindelig strategi er at forsøge igen ved netværksfejl nogle få gange, men straks give op ved en syntaksfejl eller fejl i et kodebid, som et genforsøg ikke kan løse.

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

Kombination med Suspense

Når en asynkron komponent ligger inde i en Suspense-grænse, styrer grænsen i stedet indlæsningstilstanden. I så fald ignoreres komponentens egen loadingComponent — Suspenses reserveindhold har prioritet.

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

Navngivne kodebidder til fejlfinding

Du kan navngive det genererede kodebid med en magisk kommentar. Det gør netværksanmodninger og rapporter om pakker nemmere at læse.

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

Asynkrone komponenter og props

Asynkrone komponenter accepterer props og udsender hændelser præcis som normale komponenter. Vue videresender alt gennemsigtigt, når den rigtige komponent er færdig med at blive indlæst — du skal ikke ændre kaldestedet.

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

Bedste praksis: Indlæs indhold øverst i visningen efter behov med omtanke

Indlæs komponenter efter behov, når de er uden for skærmen, bag brugerinteraktioner (dialoger, faner) eller sjældent bruges. Undgå at indlæse kritisk brugerflade øverst i visningen efter behov — den ekstra netværksanmodning kan forringe den oplevede ydeevne.

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

Hurtig kontrol

Test din forståelse af defineAsyncComponent.

Besvar den i den interaktive lektion

Opsummering

Du har lært om indlæsning af asynkrone komponenter med defineAsyncComponent:

Loader-formen returnerer en dynamisk import() til kodeopdeling
Options-formen tilføjer loadingComponent, errorComponent, delay og timeout
delay undgår blinkende indlæsningsindikatorer, mens timeout får langsomme indlæsninger til at mislykkes
onError(error, retry, fail, attempts) implementerer logik for genforsøg eller opgivelse
Inde i Suspense overtager grænsens reserveindhold brugerfladen under indlæsning

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: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Asynkrone komponenter med defineAsyncComponent” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Asynkrone komponenter med defineAsyncComponent”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Asynkrone komponenter med defineAsyncComponent”?

defineAsyncComponent(), loadingComponent, errorComponent samt indstillingerne delay og timeout Du øver dig i Vue 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å Vue Academy?

Der kræves ingen tidligere erfaring. Vue 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 med defineAsyncComponent”?

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 Vue Academy-lektion?

Ja. Alle Vue 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

Vue Suspense-komponenten
Asynkrone komponenter med defineAsyncComponent
Streaming-SSR med renderToWebStream
Strategier for udskudt hydrering

← Tilbage til Vue Academy