0Pricing
Vue Academy · Lektion

Vue-Suspense-Komponente

mit default- und #fallback-Slots, asynchrones Laden von Komponenten und verschachteltes Suspense

Vue-Suspense-Komponente ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was Suspense löst

Suspense ist eine integrierte Vue-Komponente, die Ladezustände für Komponenten mit asynchronen Abhängigkeiten koordiniert.

Ohne diese Komponente verwaltet jede asynchrone Komponente ihren eigenen Ladeindikator. Mit Suspense deklarieren Sie eine gemeinsame Grenze, die auf alle verschachtelten asynchronen Vorgänge wartet und bis zur vollständigen Bereitschaft eine einzige Fallback-Anzeige einblendet.

Zwei Slots: default und fallback

Suspense stellt zwei benannte Slots bereit:

  • default — der eigentliche Inhalt, der asynchrone Komponenten oder ein asynchrones setup() enthalten kann
  • fallback — das, was angezeigt werden soll, während der default-Slot aufgelöst wird

Sobald alle asynchronen Abhängigkeiten abgeschlossen sind, ersetzt Vue den Fallback durch den default-Inhalt.

<template>
  <Suspense>
    <template #default>
      <UserDashboard />
    </template>
    <template #fallback>
      <div class="spinner">Loading dashboard...</div>
    </template>
  </Suspense>
</template>

Async setup() als Abhängigkeit

Eine Komponente wird zu einer asynchronen Abhängigkeit, wenn ihre Funktion setup() als async deklariert ist und auf etwas wartet. Vue verfolgt das zurückgegebene Promise.

Das entsprechende <script setup> besteht darin, direkt im Block ein await auf der obersten Ebene zu verwenden.

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

// Top-level await makes this an async dependency of Suspense
const res = await fetch('/api/profile')
const profile = ref(await res.json())
</script>

<template>
  <h1>Welcome, {{ profile.name }}</h1>
</template>

Asynchrone Komponenten zählen ebenfalls

Auch mit defineAsyncComponent erstellte Komponenten werden von Suspense verfolgt. Der Fallback bleibt sichtbar, bis der dynamische import() aufgelöst wird.

So können Sie umfangreiche Komponenten per Code-Splitting aufteilen, ohne für jede Komponente eine eigene Ladeanzeige schreiben zu müssen.

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

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

<template>
  <Suspense>
    <Chart />
    <template #fallback>Preparing chart...</template>
  </Suspense>
</template>

Mehrere asynchrone untergeordnete Komponenten gemeinsam abwarten

Wenn der default-Slot mehrere asynchrone Abhängigkeiten enthält, wartet Suspense, bis alle aufgelöst sind, bevor der Inhalt angezeigt wird.

Dadurch wird verhindert, dass sich das Layout verschiebt, weil Komponenten nacheinander eingeblendet werden.

<template>
  <Suspense>
    <div>
      <UserStats />   <!-- async setup -->
      <RecentOrders /> <!-- async setup -->
      <Recommendations /> <!-- async component -->
    </div>
    <template #fallback>
      <PageSkeleton />
    </template>
  </Suspense>
</template>

Ablehnungen mit onErrorCaptured abfangen

Wenn ein asynchrones setup() abgelehnt wird (beispielsweise wegen eines fehlgeschlagenen Abrufs), wird der Fehler an den nächsten onErrorCaptured-Hook in einer übergeordneten Komponente weitergegeben.

Suspense selbst rendert keine Fehler. Verwenden Sie es daher zusammen mit einer Error Boundary.

<script setup>
import { ref, onErrorCaptured } from 'vue'

const error = ref(null)

onErrorCaptured((err) => {
  error.value = err
  return false // stop the error from propagating further
})
</script>

Muster: Error Boundary + Suspense

In der Produktion wird Suspense üblicherweise in eine Error-Boundary-Komponente eingebettet. onErrorCaptured gibt false zurück, um die Weitergabe zu stoppen und stattdessen eine Fehleroberfläche zu rendern.

<script setup>
import { ref, onErrorCaptured } from 'vue'
const err = ref(null)
onErrorCaptured((e) => { err.value = e; return false })
</script>

<template>
  <p v-if="err">Failed to load: {{ err.message }}</p>
  <Suspense v-else>
    <ProfilePanel />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Die pending- und resolve-Ereignisse

Suspense löst Lebenszyklusereignisse aus, auf die Sie reagieren können:

  • @pending — wird beim Wechsel in den ausstehenden (Lade-)Zustand ausgelöst
  • @resolve — wird ausgelöst, wenn der default-Slot vollständig aufgelöst ist
  • @fallback — wird ausgelöst, wenn der Fallback-Inhalt angezeigt wird

Das ist beispielsweise für Analytics oder Fortschrittsbalken nützlich.

<template>
  <Suspense @pending="onPending" @resolve="onResolve">
    <RouteView />
    <template #fallback>Loading route...</template>
  </Suspense>
</template>

timeout-Prop für verzögerten Fallback

Die timeout-Prop (in Millisekunden) verzögert die Anzeige des Fallbacks. Wird die asynchrone Arbeit schneller als das Timeout abgeschlossen, wird der Fallback überhaupt nicht angezeigt.

So vermeiden Sie bei schnellen Antworten ein kurzes Aufblitzen des Ladeindikators.

<template>
  <!-- Only show fallback if loading exceeds 200ms -->
  <Suspense :timeout="200">
    <FastPanel />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Suspense mit Router und Transitions

Suspense lässt sich mit RouterView und Transition kombinieren, um asynchrone Routenwechsel zu animieren. Die Reihenfolge ist wichtig: Transition umschließt Suspense, das wiederum die geroutete Komponente umschließt.

<template>
  <RouterView v-slot="{ Component }">
    <Transition mode="out-in">
      <Suspense>
        <component :is="Component" />
        <template #fallback>Loading page...</template>
      </Suspense>
    </Transition>
  </RouterView>
</template>

Wann Sie Suspense NICHT verwenden sollten

Vermeiden Sie Suspense für Daten, die regelmäßig neu abgerufen werden, während die Komponente eingebunden bleibt — es steuert nur die initiale asynchrone Auflösung. Verwenden Sie für laufende Ladezustände (Seitennummerierung, erneutes Abrufen) stattdessen ein normales reaktives loading-Ref.

<script setup>
import { ref } from 'vue'
const loading = ref(false)
async function loadMore() {
  loading.value = true
  await fetchNextPage()
  loading.value = false
}
</script>

Schnelltest

Testen Sie Ihr Verständnis von Suspense.

Zusammenfassung

Sie haben gelernt, wie Suspense asynchrone Abhängigkeiten koordiniert:

  • Der default-Slot enthält asynchronen Inhalt (asynchrones setup oder asynchrone Komponenten)
  • Der fallback-Slot wird während des Ladens angezeigt
  • Es wartet auf alle asynchronen untergeordneten Komponenten, bevor der Inhalt angezeigt wird
  • Ablehnungen werden an onErrorCaptured in einer übergeordneten Boundary weitergegeben
  • timeout verhindert ein kurzes Aufblitzen des Ladeindikators; Ereignisse wie @resolve unterstützen Analytics

Häufig gestellte Fragen

Ist die Lektion „Vue-Suspense-Komponente“ kostenlos?

Ja — der vollständige Text von „Vue-Suspense-Komponente“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Vue-Suspense-Komponente“?

mit default- und #fallback-Slots, asynchrones Laden von Komponenten und verschachteltes Suspense Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 1 von 4.

Wie lange dauert die Lektion „Vue-Suspense-Komponente“?

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 Vue Academy-Lektion Code schreiben und ausführen?

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

  1. Vue-Suspense-Komponente
  2. Asynchrone Komponenten mit defineAsyncComponent
  3. Streaming-SSR mit renderToWebStream
  4. Strategien für verzögerte Hydration
← Zurück zu Vue Academy