Co to jest komponent Suspense w Vue?

Question

IT Interview Practice · Accepted Answer

`` to wbudowany komponent, który koordynuje **async dependencies** w drzewie komponentów — wyświetla fallback (loading UI) dopóki wszystkie zagnieżdżone async operacje się nie rozwiążą, a następnie wyświetla rzeczywistą zawartość. Eliminuje ręczny boilerplate `isLoading`. ## Dwa sloty ```vue ``` ## Działa z async setup() / top-level await ```vue ``` Normalnie komponent nie może `await` w setup bez zarządzania stanem ładowania. `` pozwala dziecku użyć **top-level `await`** (lub async `setup`), a rodzic Suspense obsługuje dla niego stan ładowania — kod dziecka pozostaje czysty, po prostu `await` na dane. ## Czeka na WSZYSTKIE zagnieżdżone async dependencies ```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). ``` ## Obsługa błędów ```vue ``` Sparuj Suspense z granicą błędu (`onErrorCaptured`) aby obsługiwać nieudane async setupy, ponieważ sam Suspense obsługuje tylko przejście załadowania/załadowania. ## Notatka o statusie ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Dlaczego to ważne `` deklaratywnie koordynuje async stany ładowania — komponenty mogą bezpośrednio `await` swoje dane, podczas gdy jeden przodek pokazuje jeden fallback do czasu aż wszystko będzie gotowe. Eliminuje rozrzucone flagi `isLoading` i wiele spinnerów, a także stanowi podstawę pobierania danych w ramach takich jak Nuxt. Wiedzenie, że istnieje (i że jest to wciąż eksperymentalne, najlepiej sparowane z granicą błędu) jest przydatne do czystego async UI, szczególnie w aplikacjach SSR/data-heavy.

Dwa sloty

Działa z async setup() / top-level await

Czeka na WSZYSTKIE zagnieżdżone async dependencies

Obsługa błędów

Notatka o statusie

Dlaczego to ważne

Powiązane pytania