Apa iku komponen Suspense ing Vue?

Question

Accepted Answer

`` yaiku komponen built-in sing ngoordinasi **ketergantungan async** ing pohon komponene — ndadekke fallback (UI loading) nganti kabeh operasi async sing nested rampung, banjur nampilke konten sing asli. Iki ngilangi boilerplate manual `isLoading`. ## Loro slot ```vue ``` ## Iku bisa digunakake karo async setup() / top-level await ```vue ``` Biyasane komponen ora bisa `await` ing setup tanpa ngengingi loading state. `` ngidini komponen anak nggunakake **top-level `await`** (utawa async `setup`), lan parent Suspense ngengingi loading state kanggo dheweke — kode komponen anak tetep resik, mung `await` datane. ## Iki ngunggu KABEH ketergantungan async nested ```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). ``` ## Nangani kesalahan ```vue ``` Gabungke Suspense karo error boundary (`onErrorCaptured`) kanggo nangani async setup sing gagal, amarga Suspense dhihin-dhihin mung ngengingi transisi loading/loaded. ## Catatan status ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Kenapa iku penting `` ngoordinasi loading states async kanthi deklaratif — ngebakke komponen `await` datane langsung sajrone ancestor siji nampilke fallback siji-siji nganti kabeh rampung. Iki ngilangi bendera `isLoading` sing kasebar lan pirang-pirang spinner, lan ndukung data fetching ing framework kaya Nuxt. Gerua yen iku ana (lan yen masih experimental, paling apik digabungke karo error boundary) kakarepan kanggo UI async sing resik, khususne ing aplikasi SSR/data-heavy.