Apakah komponen Suspense dalam Vue?

Question

Accepted Answer

`` ialah komponen terbina yang mengoordinasi **kebergantungan async** dalam pohon komponennya — ia menunjukkan fallback (UI pemuatan) sehingga semua operasi async bersarang diselesaikan, kemudian memaparkan kandungan sebenar. Ia menghilangkan boilerplate `isLoading` manual. ## Dua slot ```vue ``` ## Ia berfungsi dengan async setup() / top-level await ```vue ``` Biasanya komponen tidak dapat `await` dalam setup tanpa menguruskan keadaan pemuatan. `` membenarkan anak menggunakan **top-level `await`** (atau async `setup`), dan Suspense induk menguruskan keadaan pemuatan untuknya — kod anak tetap bersih, hanya `await`ing datanya. ## Ia menunggu SEMUA kebergantungan async bersarang ```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). ``` ## Mengendalikan ralat ```vue ``` Gabungkan Suspense dengan sempadan ralat (`onErrorCaptured`) untuk mengendalikan setup async yang gagal, kerana Suspense itu sendiri hanya menguruskan peralihan pemuatan/dimuat. ## Nota status ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Mengapa ini penting `` mengoordinasi keadaan pemuatan async secara deklaratif — membenarkan komponen `await` data mereka secara langsung semasa seorang nenek moyang tunggal menunjukkan satu fallback sehingga semuanya siap. Ia menghilangkan bendera `isLoading` yang tersebar dan berbilang spinner, dan mendasari pengambilan data dalam rangka kerja seperti Nuxt. Mengetahui ia wujud (dan bahawa ia masih eksperimental, terbaik dipasangkan dengan sempadan ralat) berguna untuk UI async yang bersih, terutamanya dalam aplikasi SSR/berat data.