Hvad er Suspense-komponenten i Vue?

Question

Accepted Answer

`` er en indbygget komponent, der koordinerer **async-afhængigheder** i sit komponenttræ — den viser en fallback (loading-UI), indtil alle indlejrede async-operationer løses, og viser derefter det rigtige indhold. Den fjerner manuel `isLoading` boilerplate. ## De to slots ```vue ``` ## Det fungerer med async setup() / top-level await ```vue ``` Normalt kan en komponent ikke `await` i setup uden at håndtere loading-tilstand. `` lader et barn-komponent bruge **top-level `await`** (eller async `setup`), og parent Suspense håndterer loading-tilstanden for det — barn-koden forbliver ren, blot `await`er dets data. ## Det venter på ALLE indlejrede async-afhængigheder ```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). ``` ## Håndtering af fejl ```vue ``` Parrer Suspense med en error boundary (`onErrorCaptured`) for at håndtere mislykkede async setups, da Suspense selv kun håndterer loading/loaded overgangen. ## Statusnotat ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Hvorfor det betyder noget `` koordinerer deklarativt async loading-tilstande — lader komponenter `await` deres data direkte, mens en enkelt forfader viser en fallback, indtil alt er klart. Det eliminerer spredte `isLoading` flag og flere spinners, og understøtter data-hentning i frameworks som Nuxt. At vide at det eksisterer (og at det stadig er eksperimentelt, bedst parret med en error boundary) er nyttigt til ren async UI, især i SSR/data-tunge apps.