Vue Suspense Bileşeni
Varsayılan ve #fallback slot'larıyla , asenkron bileşen yükleme ve iç içe Suspense.
Vue Suspense Bileşeni, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Suspense Ne İşe Yarar
Suspense, asenkron bağımlılıkları olan bileşenlerin yüklenme durumlarını koordine eden yerleşik bir Vue bileşenidir.
Onsuz, her asenkron bileşen kendi yükleniyor göstergesini yönetir. Suspense ile tüm iç içe asenkron çalışmaların tamamlanmasını bekleyen ve her şey hazır olana kadar tek bir fallback gösteren bir sınır tanımlarsınız.
İki Yuva: varsayılan ve fallback
Suspense iki adlandırılmış yuva sunar:
- default — asenkron bileşenler veya asenkron bir
setup()içerebilen gerçek içerik - fallback — varsayılan yuva çözümlenirken gösterilecek içerik
Tüm asenkron bağımlılıklar tamamlandığında Vue, fallback içeriğini varsayılan içerikle değiştirir.
<template>
<Suspense>
<template #default>
<UserDashboard />
</template>
<template #fallback>
<div class="spinner">Loading dashboard...</div>
</template>
</Suspense>
</template>Bir Bağımlılık Olarak Async setup()
Bir bileşenin setup() işlevi async olarak tanımlanır ve bir şeyi beklerse bileşen asenkron bağımlılığa dönüşür. Vue, döndürülen promise'i izler.
<script setup> karşılığı, blok içinde doğrudan üst düzey await kullanmaktır.
<script setup>
import { ref } from 'vue'
// Top-level await makes this an async dependency of Suspense
const res = await fetch('/api/profile')
const profile = ref(await res.json())
</script>
<template>
<h1>Welcome, {{ profile.name }}</h1>
</template>Asenkron Bileşenler de Sayılır
defineAsyncComponent ile oluşturulan bileşenler de Suspense tarafından izlenir. Dinamik import() çözümlenene kadar fallback görünür kalır.
Bu sayede ağır bileşenleri her bileşene özel yüklenme arayüzü yazmadan kod parçalarına ayırabilirsiniz.
<script setup>
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent(() =>
import('./HeavyChart.vue')
)
</script>
<template>
<Suspense>
<Chart />
<template #fallback>Preparing chart...</template>
</Suspense>
</template>Birden Çok Eşzamansız Alt Öğe Birlikte Bekler
Varsayılan yuva birkaç eşzamansız bağımlılık içeriyorsa, Suspense içeriği göstermeden önce hepsinin çözülmesini bekler.
Bu, bileşenlerin teker teker ortaya çıkmasından kaynaklanan yerleşim kaymasını önler.
<template>
<Suspense>
<div>
<UserStats /> <!-- async setup -->
<RecentOrders /> <!-- async setup -->
<Recommendations /> <!-- async component -->
</div>
<template #fallback>
<PageSkeleton />
</template>
</Suspense>
</template>onErrorCaptured ile Reddedilmeleri Yakalama
Eşzamansız bir setup() reddedilirse (örneğin, başarısız bir veri alma işlemi nedeniyle), hata üst bileşendeki en yakın onErrorCaptured kancasına aktarılır.
Suspense hataları kendisi oluşturmaz; bu nedenle onu bir hata sınırıyla birlikte kullanın.
<script setup>
import { ref, onErrorCaptured } from 'vue'
const error = ref(null)
onErrorCaptured((err) => {
error.value = err
return false // stop the error from propagating further
})
</script>Hata Sınırı + Suspense Kalıbı
Yaygın üretim kalıbı, Suspense'i bir hata sınırı bileşeninin içine alır. onErrorCaptured, yayılımı durdurmak ve bunun yerine bir hata arayüzü oluşturmak için false döndürür.
<script setup>
import { ref, onErrorCaptured } from 'vue'
const err = ref(null)
onErrorCaptured((e) => { err.value = e; return false })
</script>
<template>
<p v-if="err">Failed to load: {{ err.message }}</p>
<Suspense v-else>
<ProfilePanel />
<template #fallback>Loading...</template>
</Suspense>
</template>@pending ve @resolve Olayları
Suspense, dinleyebileceğiniz yaşam döngüsü olayları yayınlar:
- @pending — bekleme (yükleme) durumuna girildiğinde tetiklenir
- @resolve — varsayılan yuvanın çözülmesi tamamlandığında tetiklenir
- @fallback — yedek içerik gösterildiğinde tetiklenir
Analiz veya ilerleme çubukları için kullanışlıdır.
<template>
<Suspense @pending="onPending" @resolve="onResolve">
<RouteView />
<template #fallback>Loading route...</template>
</Suspense>
</template>timeout Özelliğiyle Gecikmeli Yedek İçerik
timeout özelliği (milisaniye cinsinden), yedek içeriğin gösterilmesini geciktirir. Eşzamansız işlem zaman aşımından daha hızlı çözülürse yedek içerik hiç görünmez.
Bu, hızlı yanıtlar sırasında yükleme göstergesinin kısa süreliğine görünmesini önler.
<template>
<!-- Only show fallback if loading exceeds 200ms -->
<Suspense :timeout="200">
<FastPanel />
<template #fallback>Loading...</template>
</Suspense>
</template>Suspense ile Yönlendirme ve Geçişler
Suspense, eşzamansız rota değişikliklerini canlandırmak için RouterView ve Transition ile birlikte çalışır. Sıralama önemlidir: Transition, yönlendirilen bileşeni saran Suspense'i sarar.
<template>
<RouterView v-slot="{ Component }">
<Transition mode="out-in">
<Suspense>
<component :is="Component" />
<template #fallback>Loading page...</template>
</Suspense>
</Transition>
</RouterView>
</template>Suspense Ne Zaman NOT Kullanılmalı
Bileşen bağlı kalırken sık sık yeniden alınan veriler için Suspense kullanmaktan kaçının — yalnızca ilk eşzamansız çözümlemeyi yönetir. Süregelen yükleme durumlarında (sayfalama, yeniden veri alma) bunun yerine normal reaktif bir loading başvurusu kullanın.
<script setup>
import { ref } from 'vue'
const loading = ref(false)
async function loadMore() {
loading.value = true
await fetchNextPage()
loading.value = false
}
</script>Hızlı Kontrol
Suspense konusundaki anlayışınızı sınayın.
Özet
Suspense'in eşzamansız bağımlılıkları nasıl koordine ettiğini öğrendiniz:
- varsayılan yuva, eşzamansız içeriği (eşzamansız kurulum veya eşzamansız bileşenler) barındırır
- yedek yuva, yükleme sırasında gösterilir
- İçeriği göstermeden önce tüm eşzamansız alt öğeleri bekler
- Reddedilmeler, üst bileşendeki hata sınırında bulunan
onErrorCaptured'a ulaşır timeout, yükleme göstergesinin kısa süreli görünmesini önler;@resolvegibi olaylar analize yardımcı olur
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Vue Suspense Bileşeni” dersi ücretsiz mi?
Evet — “Vue Suspense Bileşeni” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Vue Suspense Bileşeni” dersinde ne öğreneceğim?
Varsayılan ve #fallback slot'larıyla , asenkron bileşen yükleme ve iç içe Suspense. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Vue Suspense Bileşeni” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vue Suspense Bileşeni
- defineAsyncComponent ile Asenkron Bileşenler
- renderToWebStream ile Akış SSR'si
- Ertelenmiş Hydration Stratejileri