Wat is de Suspense component in Vue?

Question

Accepted Answer

`` is een ingebouwde component die **async afhankelijkheden** in zijn componentboom coördineert — het toont een fallback (loading UI) totdat alle geneste async-bewerkingen zijn opgelost, en geeft vervolgens de echte inhoud weer. Het verwijdert handmatig `isLoading` boilerplate. ## Waarom het belangrijk is ```vue ``` ## Het werkt met async setup() / top-level await ```vue ``` Normaal kan een component niet `await` in setup zonder laadstatus te beheren. `` stelt een kind in staat **top-level `await`** te gebruiken (of async `setup`), en de parent Suspense handelt de laadstatus daarvoor af — de kindcode blijft schoon, gewoon `await` van zijn gegevens. ## Het wacht op ALLE geneste async afhankelijkheden ```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). ``` ## Fouten afhandelen ```vue ``` Paar Suspense met een errorgrenzen (`onErrorCaptured`) om mislukte async setups af te handelen, aangezien Suspense zelf alleen de laden/geladen overgang beheert. ## Statusnota ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Waarom het belangrijk is `` coördineert declaratief async laadtoestanden — componenten kunnen hun gegevens rechtstreeks `await` terwijl een enkele voorouder één fallback toont totdat alles klaar is. Het elimineert verspreide `isLoading` vlaggen en meerdere spinners, en ondersteunt gegevensinvoering in frameworks zoals Nuxt. Weten dat het bestaat (en dat het nog steeds experimenteel is, het beste gekoppeld aan een errorgrenzen) is nuttig voor schone async UI, vooral in SSR/data-zware apps.