Ce este componenta Suspense în Vue?

Question

Accepted Answer

`` este o componentă încorporată care coordonează **async dependencies** în arborele componentei — afișează un fallback (loading UI) până când toate operațiile async imbricate se rezolvă, apoi afișează conținutul real. Elimină boilerplate-ul manual `isLoading`. ## Cele două sloturi ```vue ``` ## Funcționează cu async setup() / top-level await ```vue ``` Normal, o componentă nu poate `await` în setup fără a gestiona starea de încărcare. `` permite unui copil să utilizeze **top-level `await`** (sau async `setup`), iar Suspense-ul părinte gestionează starea de încărcare pentru el — codul copilului rămâne curat, doar `await` datele sale. ## Așteaptă TOATE dependențele async imbricate ```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). ``` ## Gestionarea erorilor ```vue ``` Cuplează Suspense cu o graniță de eroare (`onErrorCaptured`) pentru a gestiona setup-uri async eșuate, deoarece Suspense în sine gestionează doar tranzițiile de încărcare/încărcare. ## Notă de stare ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## De ce este important `` coordonează în mod declarativ stările de încărcare async — permițând componentelor să `await` direct datele lor în timp ce un singur strămoș afișează un fallback până când totul este gata. Elimină flag-urile `isLoading` dispersate și multiple spinners, și susține preluarea datelor în framework-uri precum Nuxt. A ști că există (și că este încă experimental, cea mai bună asociere cu o graniță de eroare) este util pentru UI async curat, mai ales în aplicații SSR/data-heavy.