0Pricing
Frontend Academy · Ders

Eşzamansız Bileşenler ve Suspense

Bileşenleri defineAsyncComponent ile tembel yüklemeyi, ile sarmalamayı ve bileşen paketi yüklenirken yedek içeriği göstermeyi öğrenin.

Eşzamansız Bileşenler ve Suspense, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Asenkron Component'ler Neden Kullanılır?

Büyük veya seyrek kullanılan component'leri (ör. bir yönetici panelini ya da grafik kütüphanesini) isteğe bağlı yüklemek, ilk paketin küçük kalmasını sağlar. Vue'nun defineAsyncComponent işlevi dinamik içe aktarma yaşam döngüsünü yönetir.

defineAsyncComponent

Bir component'e çözümlenen bir promise döndüren yükleyici işlevini iletin. Vue; yüklemeyi, hataları ve zaman aşımını yönetir.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(
  () => import('./Dashboard.vue')
);

// Use it like a normal component:
<template>
  <Dashboard />
</template>

Asenkron Davranışı Yapılandırma

Yükleme arayüzünü, hata arayüzünü, yükleme öncesindeki gecikmeyi ve zaman aşımını özelleştirmek için bir seçenekler nesnesi iletin.

const Dashboard = defineAsyncComponent({
  loader: () => import('./Dashboard.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorPanel,
  delay: 200,    // ms before showing loading
  timeout: 5000  // ms before showing error
});

Paketleyici Parçasını Bölme

Dinamik içe aktarma, çıktı içinde ayrı bir parçaya dönüşür. Adlandırma ve önceden getirme için Vite/webpack sihirli yorumlarını kullanın.

const Dashboard = defineAsyncComponent(
  () => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);

Rota Düzeyinde Tembel Yükleme

Vue Router, rota tanımlarında asenkron component'leri doğrudan destekler.

const routes = [
  { path: '/',          component: () => import('./Home.vue') },
  { path: '/dashboard', component: () => import('./Dashboard.vue') },
  { path: '/admin',     component: () => import('./Admin.vue') }
];

Suspense Component'i

Vue'nun deneysel <Suspense> component'i, ağacındaki herhangi bir asenkron bağımlılık beklemedeyken bir geri dönüş görünümü oluşturur.

<template>
  <Suspense>
    <template #default>
      <Dashboard />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

Asenkron setup()

setup() asenkron olabilir; Vue, oluşturma işleminden önce tamamlanmasını bekler. Suspense içinde çalışır.

<!-- AsyncPage.vue -->
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
await userStore.fetchProfile(); // top-level await
</script>

<!-- Parent uses Suspense to handle the await -->

onErrorCaptured ile Hata İşleme

Asenkron component'lerden veya asenkron setup işleminden kaynaklanan hataları yakalamak için bir üst component'te onErrorCaptured kullanın.

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('Caught:', err, info);
  return false; // prevent propagation
});

Suspense ve Hata Sınırını Birleştirme

Asenkron bir component ağacını hem Suspense (yükleme için) hem de hata yakalayan bir üst component (hatalar için) ile sarın.

<template>
  <ErrorBoundary>
    <Suspense>
      <template #default><Dashboard /></template>
      <template #fallback><Spinner /></template>
    </Suspense>
  </ErrorBoundary>
</template>

Suspense Deneyseldir

Vue 3.4 itibarıyla <Suspense> hâlâ deneysel olarak işaretlenmiştir; API değişebilir. Asenkron component'lerin kendisi (defineAsyncComponent) kararlıdır ve üretimde kullanıma hazırdır.

Asenkron Component'ler Ne Zaman Kullanılmalı?

İyi adaylar: rota component'leri, yönetici ve ayar panelleri, isteğe bağlı açılan modal'lar, ağır grafikler ve düzenleyiciler. Şunlar için kullanmayın: küçük component'ler ve her sayfada kullanılan component'ler (bunları başka bir şekilde bölün).

Hızlı Kontrol

Hangi Vue 3 işlevi, dinamik içe aktarmayı tembel yüklenen bir component'e dönüştürür?

Özet: Asenkron Component'ler ve Suspense

defineAsyncComponent, tembel yükleme için dinamik içe aktarmaları sarar. loadingComponent, errorComponent, delay ve timeout'u yapılandırın. Paketleyiciler ayrı parçalar oluşturur. Rota düzeyinde tembel yükleme component: () => import('...') ile yapılır. <Suspense>, asenkron bağımlılıklar çözümlenirken bir geri dönüş görünümü oluşturur (hâlâ deneyseldir). Üst düzey await içeren asenkron setup(), Suspense içinde çalışır. onErrorCaptured, asenkron hataları yakalar.

Sıkça Sorulan Sorular

“Eşzamansız Bileşenler ve Suspense” dersi ücretsiz mi?

Evet — “Eşzamansız Bileşenler ve Suspense” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Eşzamansız Bileşenler ve Suspense” dersinde ne öğreneceğim?

Bileşenleri defineAsyncComponent ile tembel yüklemeyi, ile sarmalamayı ve bileşen paketi yüklenirken yedek içeriği göstermeyi öğrenin. Frontend 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.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 2. dersidir.

“Eşzamansız Bileşenler ve Suspense” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

  1. Bağımlılık Ekleme için provide() ve inject()
  2. Eşzamansız Bileşenler ve Suspense
  3. Özel Yönergeler
  4. Eklenti Sistemi: app.use()
← Frontend Academy Sayfasına Dön