Vue Academy · Pelajaran

Komponen Vue Suspense

dengan slot lalai dan #fallback, pemuatan komponen tak segerak, Suspense bersarang.

Pelajaran 1 daripada 413 langkah

Komponen Vue Suspense ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang Diselesaikan oleh Suspense

Suspense ialah komponen Vue terbina dalam yang menyelaraskan keadaan pemuatan untuk komponen yang mempunyai kebergantungan tak segerak.

Tanpanya, setiap komponen tak segerak mengurus pemuatnya sendiri. Dengan Suspense, anda mengisytiharkan satu sempadan yang menunggu semua kerja tak segerak bersarang dan memaparkan satu keadaan fallback sehingga semuanya sedia.

Dua Slot: lalai dan fallback

Suspense menyediakan dua slot bernama:

lalai — kandungan sebenar, yang mungkin mengandungi komponen tak segerak atau setup() tak segerak
fallback — perkara yang dipaparkan sementara slot lalai diselesaikan

Apabila semua kebergantungan tak segerak selesai, Vue menggantikan keadaan fallback dengan kandungan lalai.

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

setup() Tak Segerak sebagai Kebergantungan

Komponen menjadi kebergantungan tak segerak apabila fungsi setup() diisytiharkan sebagai async dan menunggu sesuatu. Vue menjejaki janji yang dikembalikan.

Padanan <script setup> ialah menggunakan await aras teratas secara langsung di dalam blok tersebut.

<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 Tak Segerak Juga Dikira

Komponen yang dicipta dengan defineAsyncComponent turut dijejaki oleh Suspense. Keadaan fallback kekal kelihatan sehingga import() dinamik selesai.

Ini membolehkan anda membahagikan kod komponen berat kepada beberapa bahagian tanpa menulis antara muka pemuatan bagi 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 Tak Segerak Menunggu Bersama

Jika slot lalai mengandungi beberapa kebergantungan tak segerak, Suspense menunggu sehingga kesemuanya diselesaikan sebelum memaparkan kandungan.

Ini mengelakkan perubahan susun atur apabila komponen muncul satu demi 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() tak segerak ditolak (contohnya, pengambilan data gagal), ralat akan disebarkan kepada cangkuk onErrorCaptured yang terdekat dalam komponen induk.

Suspense sendiri tidak memaparkan ralat, jadi padankannya dengan sempadan ralat.

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

Sempadan Ralat + Corak Suspense

Corak pengeluaran yang lazim membungkus Suspense di dalam komponen sempadan ralat. onErrorCaptured mengembalikan false untuk menghentikan penyebaran dan memaparkan UI ralat sebagai ganti.

<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 pending dan resolve

Suspense memancarkan peristiwa kitar hayat yang boleh anda dengari:

@pending — dicetuskan apabila memasuki keadaan pending (loading)
@resolve — dicetuskan apabila slot lalai selesai diselesaikan
@fallback — dicetuskan apabila kandungan fallback dipaparkan

Berguna untuk analitik atau bar kemajuan.

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

Prop timeout untuk Fallback Tertunda

Prop timeout (dalam milisaat) melengahkan pemaparan fallback. Jika kerja tak segerak diselesaikan lebih cepat daripada timeout, fallback tidak akan muncul.

Ini mengelakkan paparan sekelip pemutar untuk respons yang pantas.

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

Suspense dengan Penghala dan Transition

Suspense boleh digubah dengan RouterView dan Transition untuk menganimasikan perubahan laluan tak segerak. Susunannya penting: Transition membungkus Suspense, yang membungkus komponen yang dihalakan.

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

Bila TIDAK Menggunakan Suspense

Elakkan Suspense untuk data yang kerap diambil semula sementara komponen kekal dipasang — ia hanya mengawal penyelesaian tak segerak awal. Untuk keadaan loading yang berterusan (penomboran, pengambilan semula), gunakan ref loading reaktif biasa sebagai ganti.

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

Semakan Ringkas

Uji pemahaman anda tentang Suspense.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari cara Suspense menyelaraskan kebergantungan tak segerak:

slot lalai menempatkan kandungan tak segerak (persediaan tak segerak atau komponen tak segerak)
slot fallback dipaparkan semasa loading
Ia menunggu semua anak tak segerak sebelum memaparkan kandungan
Penolakan mengalir ke onErrorCaptured dalam sempadan induk
timeout mengelakkan paparan sekelip pemutar; peristiwa seperti @resolve membantu analitik

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Komponen Vue Suspense” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Komponen Vue Suspense”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Komponen Vue Suspense”?

dengan slot lalai dan #fallback, pemuatan komponen tak segerak, Suspense bersarang. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Komponen Vue Suspense” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Komponen Vue Suspense
Komponen Tak Segerak dengan defineAsyncComponent
SSR Penstriman dengan renderToWebStream
Strategi Penghidratan Tertunda

← Kembali ke Vue Academy