Mi a Suspense komponens a Vue-ban?

Question

Accepted Answer

A `` egy beépített komponens, amely koordinálja az **aszinkron függőségeket** a komponens fájában — egy fallback (betöltési UI) jelenik meg, amíg az összes beágyazott aszinkron művelet fel nem oldódik, majd megjeleníti a tényleges tartalmat. Kiküszöböli a kézi `isLoading` boilerplate-et. ## Miért fontos ez ```vue ``` ## Működik aszinkron setup() / top-level await-tel ```vue ``` Normálisan egy komponens nem tud `await`-et használni a setup-ban a betöltési állapot kezelése nélkül. A `` lehetővé teszi a gyermeknek, hogy **top-level `await`**-et (vagy aszinkron `setup`-ot) használjon, és a szülő Suspense kezeli helyette a betöltési állapotot — a gyermek kód tiszta marad, csak az adatait `await`-eli. ## Megvárja az összes beágyazott aszinkron függőséget ```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). ``` ## Hibakezelés ```vue ``` Kötsd össze a Suspense-t egy error boundary-vel (`onErrorCaptured`), hogy kezelni tudd a meghiúsult aszinkron setup-okat, mivel a Suspense maga csak a betöltés/betöltött átmenetet kezeli. ## Állapot megjegyzés ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Miért fontos ez A `` deklaratívan koordinálja az aszinkron betöltési állapotokat — lehetővé teszi a komponenseknek, hogy közvetlenül `await`-eljék az adataikat, miközben egy ős egy fallback-ot mutat, amíg minden készen nem áll. Kiküszöböli a szétszórt `isLoading` jelzőket és több spinner-t, és a Nuxt-hoz hasonló keretrendszerek adatlehívásának alapja. Hasznos tudni, hogy létezik (és hogy még mindig kísérleti, a legjobban egy error boundary-vel párosítva) a tiszta aszinkron UI-hoz, különösen SSR/adat-nehéz alkalmazásokban.