Co je komponenta Suspense ve Vue?

Question

Accepted Answer

`` je vestavěná komponenta, která koordinuje **asynchronní závislosti** v jejím stromu komponent — zobrazuje fallback (UI načítání), dokud se nevyřeší všechny vnořené asynchronní operace, a pak zobrazí skutečný obsah. Eliminuje manuální `isLoading` boilerplate. ## Dva sloty ```vue ``` ## Funguje s async setup() / top-level await ```vue ``` Zvykle komponenta nemůže `await` v setup bez správy stavu načítání. `` umožňuje podřízené komponentě použít **top-level `await`** (nebo async `setup`), a nadřízená Suspense řídí stav načítání za ni — kód podřízené komponenty zůstává čistý, pouze `await`uje její data. ## Čeká na VŠECHNY vnořené asynchronní závislosti ```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). ``` ## Zpracování chyb ```vue ``` Seskupte Suspense s error boundary (`onErrorCaptured`) pro zpracování neúspěšných asynchronních setup, protože Suspense sama řídí pouze přechod načítání/načteno. ## Poznámka ke stavu ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Proč je to důležité `` deklarativně koordinuje stavy asynchronního načítání — umožňuje komponentám `await` jejich data přímo, zatímco jeden předchůdce zobrazuje jeden fallback, dokud není vše připraveno. Eliminuje rozptýlené `isLoading` příznaky a více spinnery a podporuje načítání dat v frameworcích jako Nuxt. Vědomost, že existuje (a že je stále experimentální, nejlépe spárovaná s error boundary) je užitečná pro čisté asynchronní UI, zejména v aplikacích SSR/datově náročných.