Vue Academy · Pelajaran

Komponen Suspense Vue

dengan slot default dan #fallback, pemuatan komponen asinkron, serta Suspense bertingkat.

Pelajaran 1 dari 413 langkah

Komponen Suspense Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Fungsi Suspense

Suspense adalah komponen Vue bawaan yang mengoordinasikan status pemuatan untuk komponen yang memiliki dependensi asinkron.

Tanpanya, setiap komponen asinkron mengelola indikator pemuatannya sendiri. Dengan Suspense, Anda mendeklarasikan satu batas yang menunggu semua pekerjaan asinkron bersarang dan menampilkan satu fallback hingga semuanya siap.

Dua Slot: bawaan dan fallback

Suspense menyediakan dua slot bernama:

bawaan — konten sebenarnya, yang dapat berisi komponen asinkron atau setup() asinkron
fallback — konten yang ditampilkan saat slot bawaan diselesaikan

Setelah semua dependensi asinkron selesai, Vue mengganti fallback dengan konten bawaan.

<template>
  <Suspense>
    <template #default>
      <UserDashboard />
    </template>
    <template #fallback>
      <div class="spinner">Loading dashboard...</div>
    </template>
  </Suspense>
</template>

setup() Asinkron sebagai Dependensi

Komponen menjadi dependensi asinkron ketika fungsi setup()-nya dideklarasikan sebagai async dan menunggu sesuatu. Vue melacak promise yang dikembalikan.

Padanan <script setup> adalah menggunakan await tingkat atas secara langsung di dalam blok.

<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>

Komponen Asinkron Juga Dihitung

Komponen yang dibuat dengan defineAsyncComponent juga dilacak oleh Suspense. Fallback tetap terlihat hingga import() dinamis selesai.

Dengan demikian, Anda dapat membagi kode komponen berat tanpa menulis UI pemuatan untuk setiap komponen.

<script setup>
import { defineAsyncComponent } from 'vue'

const Chart = defineAsyncComponent(() =>
  import('./HeavyChart.vue')
)
</script>

<template>
  <Suspense>
    <Chart />
    <template #fallback>Preparing chart...</template>
  </Suspense>
</template>

Beberapa Anak Asinkron Menunggu Bersama

Jika slot bawaan berisi beberapa dependensi asinkron, Suspense menunggu hingga semuanya selesai sebelum menampilkan konten.

Ini mencegah pergeseran tata letak karena komponen muncul satu per satu.

<template>
  <Suspense>
    <div>
      <UserStats />   <!-- async setup -->
      <RecentOrders /> <!-- async setup -->
      <Recommendations /> <!-- async component -->
    </div>
    <template #fallback>
      <PageSkeleton />
    </template>
  </Suspense>
</template>

Menangkap Penolakan dengan onErrorCaptured

Jika setup() asinkron mengalami penolakan (misalnya, pengambilan data gagal), kesalahan tersebut diteruskan ke pengait onErrorCaptured terdekat pada komponen induk.

Suspense sendiri tidak merender kesalahan, jadi padukan dengan batas kesalahan.

<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>

Pola Batas Kesalahan + Suspense

Pola produksi yang umum membungkus Suspense di dalam komponen batas kesalahan. onErrorCaptured mengembalikan false untuk menghentikan propagasi dan merender antarmuka kesalahan sebagai gantinya.

<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>

Peristiwa Tertunda dan Penyelesaian

Suspense memancarkan peristiwa siklus hidup yang dapat Anda dengarkan:

@pending — dipicu saat memasuki keadaan tertunda (pemuatan)
@resolve — dipicu saat slot bawaan selesai diselesaikan
@fallback — dipicu saat konten cadangan ditampilkan

Berguna untuk analitik atau bilah kemajuan.

<template>
  <Suspense @pending="onPending" @resolve="onResolve">
    <RouteView />
    <template #fallback>Loading route...</template>
  </Suspense>
</template>

Properti Batas Waktu untuk Cadangan yang Ditunda

Properti timeout (dalam milidetik) menunda penampilan cadangan. Jika pekerjaan asinkron selesai lebih cepat daripada batas waktu, cadangan tidak pernah muncul.

Ini menghindari tampilan indikator pemuatan sesaat untuk respons yang cepat.

<template>
  <!-- Only show fallback if loading exceeds 200ms -->
  <Suspense :timeout="200">
    <FastPanel />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

Suspense dengan Perute dan Transisi

Suspense dapat dipadukan dengan RouterView dan Transition untuk menganimasikan perubahan rute asinkron. Urutannya penting: Transition membungkus Suspense, yang membungkus komponen rute.

<template>
  <RouterView v-slot="{ Component }">
    <Transition mode="out-in">
      <Suspense>
        <component :is="Component" />
        <template #fallback>Loading page...</template>
      </Suspense>
    </Transition>
  </RouterView>
</template>

Kapan TIDAK Menggunakan Suspense

Hindari Suspense untuk data yang sering dimuat ulang selama komponen tetap terpasang — fitur ini hanya mengatur penyelesaian asinkron awal. Untuk keadaan pemuatan yang terus berlangsung (paginasi, pemuatan ulang), gunakan referensi reaktif loading biasa.

<script setup>
import { ref } from 'vue'
const loading = ref(false)
async function loadMore() {
  loading.value = true
  await fetchNextPage()
  loading.value = false
}
</script>

Uji Cepat

Uji pemahaman Anda tentang Suspense.

Jawab di pelajaran interaktif

Ringkasan

Anda mempelajari cara Suspense mengoordinasikan dependensi asinkron:

slot bawaan menampung konten asinkron (penyiapan asinkron atau komponen asinkron)
slot cadangan ditampilkan selama pemuatan
Fitur ini menunggu semua anak asinkron sebelum menampilkan konten
Penolakan diteruskan ke onErrorCaptured pada batas komponen induk
timeout menghindari tampilan indikator pemuatan sesaat; peristiwa seperti @resolve membantu analitik

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 42
Pelajaran: 156

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Suspense Vue” gratis?

Ya — teks lengkap “Komponen Suspense Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Suspense Vue”?

dengan slot default dan #fallback, pemuatan komponen asinkron, serta Suspense bertingkat. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Komponen Suspense Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Komponen Suspense Vue
Komponen Asinkron dengan defineAsyncComponent
SSR Streaming dengan renderToWebStream
Strategi Hydration Tertunda

← Kembali ke Vue Academy