Vad är Suspense-komponenten i Vue?

Question

Accepted Answer

`` är en inbyggd komponent som koordinerar **asynkrona beroenden** i sitt komponentträd — den visar en reserv (laddar UI) tills alla kapslade asynkrona operationer löses, sedan visar den det verkliga innehållet. Det eliminerar manuell `isLoading`-kod. ## De två slots ```vue ``` ## Det fungerar med async setup() / top-level await ```vue ``` Normalt kan en komponent inte `await` i setup utan att hantera laddningstillståndet. `` låter ett barn använda **top-level `await`** (eller async `setup`), och den överordnade Suspense hanterar laddningstillståndet för det — barnets kod förblir ren, bara `await` data. ## Det väntar på ALLA kapslade asynkrona beroenden ```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). ``` ## Hantering av fel ```vue ``` Kopla Suspense med en felgräns (`onErrorCaptured`) för att hantera misslyckade asynkrona inställningar, eftersom Suspense själv bara hanterar övergången mellan laddning/laddat. ## Statusanteckning ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Varför det är viktigt `` koordinerar deklarativt asynkrona laddningstillstånden — vilket låter komponenter `await` sina data direkt medan en enda överordnad visar en reserv tills allt är klart. Det eliminerar spridda `isLoading`-flaggor och flera snurror, och utgör grunden för datahämtning i ramverk som Nuxt. Att veta att det finns (och att det fortfarande är experimentellt, bäst kombinerat med en felgräns) är användbart för ren asynkron UI, särskilt i SSR/dataintensiva appar.