Asynchrone Komponenten und Suspense
Laden Sie Komponenten mit defineAsyncComponent verzögert, umschließen Sie sie mit und zeigen Sie während des Ladens des Komponenten-Bundles einen Fallback-Inhalt an.
Asynchrone Komponenten und Suspense ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum asynchrone Komponenten?
Wenn große oder selten verwendete Komponenten erst bei Bedarf geladen werden (z. B. ein Admin-Panel oder eine Diagrammbibliothek), bleibt das anfängliche Bundle klein. Vue verwaltet mit defineAsyncComponent den Lebenszyklus des dynamischen Imports.
defineAsyncComponent
Übergeben Sie eine Loader-Funktion, die ein Promise zurückgibt, das zu einer Komponente aufgelöst wird. Vue kümmert sich um das Laden, Fehler und Zeitüberschreitungen.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>Asynchrones Verhalten konfigurieren
Übergeben Sie ein Optionsobjekt, um die Ladeanzeige, die Fehleranzeige, die Verzögerung vor dem Laden und das Zeitlimit anzupassen.
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});Chunk-Aufteilung durch den Bundler
Der dynamische Import wird in der Ausgabe zu einem separaten Chunk. Verwenden Sie Magic Comments von Vite/webpack für die Benennung und das Prefetching.
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);Lazy Loading auf Routenebene
Vue Router unterstützt asynchrone Komponenten direkt in Routendefinitionen.
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Suspense-Komponente
Vues experimentelle <Suspense>-Komponente rendert einen Fallback, während eine asynchrone Abhängigkeit in ihrem Teilbaum noch aussteht.
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>Async setup()
setup() kann asynchron sein – Vue wartet mit dem Rendern, bis die Funktion aufgelöst wurde. Das funktioniert innerhalb von 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 -->Fehlerbehandlung mit onErrorCaptured
Verwenden Sie onErrorCaptured in einer übergeordneten Komponente, um Fehler aus asynchronen Komponenten oder asynchronem setup abzufangen.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Suspense und Error Boundary kombinieren
Umschließen Sie einen asynchronen Komponentenbaum sowohl mit Suspense (für den Ladezustand) als auch mit einer übergeordneten Komponente, die Fehler abfängt.
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspense ist experimentell
Seit Vue 3.4 ist <Suspense> weiterhin als experimentell gekennzeichnet – die API kann sich ändern. Asynchrone Komponenten selbst (defineAsyncComponent) sind stabil und für den Produktionseinsatz geeignet.
Wann asynchrone Komponenten verwenden
Geeignete Kandidaten: Routenkomponenten, Admin- und Einstellungsbereiche, bei Bedarf geöffnete Modale sowie umfangreiche Diagramme und Editoren. Verzichten Sie darauf bei: kleinen Komponenten und Komponenten, die auf jeder Seite verwendet werden (teilen Sie diese auf andere Weise auf).
Kurze Überprüfung
Welche Vue-3-Funktion macht aus einem dynamischen Import eine lazy geladene Komponente?
Zusammenfassung: Asynchrone Komponenten und Suspense
defineAsyncComponent umschließt dynamische Imports für Lazy Loading. Konfigurieren Sie loadingComponent, errorComponent, delay und timeout. Bundler erzeugen separate Chunks. Lazy Loading auf Routenebene über component: () => import('...'). <Suspense> rendert einen Fallback, während asynchrone Abhängigkeiten aufgelöst werden (weiterhin experimentell). Asynchrones setup() mit top-level await funktioniert innerhalb von Suspense. onErrorCaptured fängt asynchrone Fehler ab.
Häufig gestellte Fragen
Ist die Lektion „Asynchrone Komponenten und Suspense“ kostenlos?
Ja — der vollständige Text von „Asynchrone Komponenten und Suspense“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Asynchrone Komponenten und Suspense“?
Laden Sie Komponenten mit defineAsyncComponent verzögert, umschließen Sie sie mit und zeigen Sie während des Ladens des Komponenten-Bundles einen Fallback-Inhalt an. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Asynchrone Komponenten und Suspense“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- provide() und inject() für Abhängigkeitsinjektion
- Asynchrone Komponenten und Suspense
- Benutzerdefinierte Direktiven
- Plugin-System: app.use()