Cos'è il componente Suspense in Vue?

Question

Accepted Answer

`` è un componente integrato che coordina **dipendenze asincrone** nel suo albero di componenti — mostra un fallback (UI di caricamento) fino a quando tutte le operazioni asincrone annidate si risolvono, quindi visualizza il contenuto reale. Rimuove il boilerplate manuale `isLoading`. ## I due slot ```vue ``` ## Funziona con async setup() / top-level await ```vue ``` Normalmente un componente non può `await` in setup senza gestire lo stato di caricamento. `` consente a un componente figlio di usare **top-level `await`** (o async `setup`), e il parent Suspense gestisce lo stato di caricamento per esso — il codice del componente figlio rimane pulito, semplicemente `await`endo i suoi dati. ## Attende TUTTE le dipendenze asincrone annidate ```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). ``` ## Gestione degli errori ```vue ``` Accoppia Suspense con un error boundary (`onErrorCaptured`) per gestire gli async setup falliti, poiché Suspense stesso gestisce solo la transizione caricamento/caricato. ## Nota di stato ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Perché è importante `` coordina dichiarativamente gli stati di caricamento asincrono — permettendo ai componenti di `await` i loro dati direttamente mentre un singolo antenato mostra un fallback fino a quando tutto è pronto. Elimina i flag `isLoading` sparsi e i multipli spinner, e sottende il recupero dati in framework come Nuxt. Sapere che esiste (e che è ancora sperimentale, meglio accoppiato con un error boundary) è utile per un'UI asincrona pulita, specialmente in app SSR/data-heavy.