Was ist die Suspense-Komponente in Vue?

Question

Accepted Answer

`` ist eine eingebaute Komponente, die **asynchrone Abhängigkeiten** in ihrem Komponentenbaum koordiniert — sie zeigt einen Fallback (Loading-UI), bis alle verschachtelten asynchronen Operationen gelöst sind, und zeigt dann den tatsächlichen Inhalt an. Sie entfernt manuelles `isLoading` Boilerplate. ## Die zwei Slots ```vue ``` ## Es funktioniert mit async setup() / top-level await ```vue ``` Normalerweise kann eine Komponente nicht `await` im setup durchführen, ohne den Ladezustand zu verwalten. `` ermöglicht es einer Kindkomponente, **top-level `await`** (oder async `setup`) zu nutzen, und die Parent Suspense verwaltet den Ladezustand dafür — der Code der Kindkomponente bleibt sauber, einfach `await`et ihre Daten. ## Es wartet auf ALLE verschachtelten asynchronen Abhängigkeiten ```text waits for every async setup in its subtree to resolve, then swaps the fallback for the real content in one go (avoids a cascade of separate spinners). ``` ## Fehlerbehandlung ```vue ``` Kombinieren Sie Suspense mit einer Error-Grenze (`onErrorCaptured`), um fehlgeschlagene asynchrone Setups zu behandeln, da Suspense selbst nur den Übergang von Laden/Geladen verwaltet. ## Statusnotiz ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Warum es wichtig ist `` koordiniert deklarativ asynchrone Ladezustände — ermöglicht Komponenten, ihre Daten direkt zu `await`en, während ein einzelner Vorfahr einen Fallback zeigt, bis alles bereit ist. Es eliminiert verstreute `isLoading` Flags und mehrere Spinner und unterstützt das Datenabrufen in Frameworks wie Nuxt. Zu wissen, dass es existiert (und dass es noch experimentell ist, am besten mit einer Error-Grenze kombiniert) ist nützlich für saubere asynchrone UI, besonders in SSR/datenlastigen Apps.