Vue'deki Suspense bileşeni nedir?

Question

Accepted Answer

``, bileşen ağacındaki **asenkron bağımlılıkları** koordine eden yerleşik bir bileşendir — tüm iç içe asenkron işlemler çözülene kadar bir fallback (yükleme UI'ı) gösterir, ardından gerçek içeriği görüntüler. Manuel `isLoading` kodunu ortadan kaldırır. ## İki slot ```vue ``` ## async setup() / top-level await ile çalışır ```vue ``` Normalde bir bileşen, yükleme durumunu yönetmeden setup'ta `await` yapamaz. ``, bir alt bileşenin **top-level `await`** (veya async `setup`) kullanmasına izin verir ve üst Suspense, onun için yükleme durumunu yönetir — alt bileşen kodu temiz kalır, sadece verilerini `await` eder. ## TÜM iç içe asenkron bağımlılıkları bekler ```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). ``` ## Hataları işleme ```vue ``` Suspense'i bir hata sınırı (`onErrorCaptured`) ile eşleştirerek başarısız asenkron kurulumları işleyin, çünkü Suspense'in kendisi yalnızca yükleme/yüklendi geçişini yönetir. ## Durum notu ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Neden önemli ``, asenkron yükleme durumlarını bildirimsel olarak koordine eder — bileşenlerin verilerini doğrudan `await` etmesine izin verir, ancak tek bir üst bileşen her şey hazır olana kadar tek bir fallback gösterir. Dağıtılmış `isLoading` bayraklarını ve birden fazla dönen simgeyi ortadan kaldırır ve Nuxt gibi çerçevelerde veri alımının temelini oluşturur. Varlığını bilmek (ve hala deneysel olduğunu, bir hata sınırı ile eşleştirilmesi en iyisi) temiz asenkron UI için ve özellikle SSR/veri yoğun uygulamalarda kullanışlıdır.