Komponen Asinkron dan Suspense
Muat komponen secara malas dengan defineAsyncComponent, bungkus dalam , dan tampilkan konten cadangan saat bundel komponen dimuat.
Komponen Asinkron dan Suspense adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa Komponen Asinkron?
Memuat komponen besar atau yang jarang digunakan sesuai kebutuhan (misalnya panel admin atau pustaka grafik) membuat bundel awal tetap kecil. defineAsyncComponent milik Vue menangani siklus hidup impor dinamis.
defineAsyncComponent
Teruskan fungsi pemuat yang mengembalikan promise yang menghasilkan komponen. Vue menangani proses pemuatan, kesalahan, dan batas waktu.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>Mengonfigurasi Perilaku Asinkron
Teruskan objek opsi untuk menyesuaikan UI pemuatan, UI kesalahan, penundaan sebelum pemuatan, dan batas waktu.
const Dashboard = defineAsyncComponent({
loader: () => import('./Dashboard.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorPanel,
delay: 200, // ms before showing loading
timeout: 5000 // ms before showing error
});Pemisahan Potongan oleh Bundler
Impor dinamis menjadi potongan terpisah dalam keluaran. Gunakan komentar khusus Vite/webpack untuk penamaan dan prefetch.
const Dashboard = defineAsyncComponent(
() => import(/* webpackChunkName: 'dashboard' */ './Dashboard.vue')
);Pemuatan Malas Tingkat Rute
Vue Router mendukung komponen asinkron secara langsung dalam definisi rute.
const routes = [
{ path: '/', component: () => import('./Home.vue') },
{ path: '/dashboard', component: () => import('./Dashboard.vue') },
{ path: '/admin', component: () => import('./Admin.vue') }
];Komponen Suspense
<Suspense> eksperimental milik Vue merender tampilan cadangan saat dependensi asinkron mana pun dalam pohonnya masih menunggu.
<template>
<Suspense>
<template #default>
<Dashboard />
</template>
<template #fallback>
<LoadingSpinner />
</template>
</Suspense>
</template>setup() Asinkron
setup() dapat bersifat asinkron—Vue menunggu hingga prosesnya selesai sebelum melakukan rendering. Fitur ini berfungsi di dalam Suspense.
<!-- 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 -->Penanganan Kesalahan dengan onErrorCaptured
Gunakan onErrorCaptured di komponen induk untuk menangkap kesalahan dari komponen asinkron atau setup asinkron.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Caught:', err, info);
return false; // prevent propagation
});Menggabungkan Suspense dan Batas Kesalahan
Bungkus pohon komponen asinkron dengan Suspense (untuk pemuatan) dan leluhur penangkap kesalahan (untuk kesalahan).
<template>
<ErrorBoundary>
<Suspense>
<template #default><Dashboard /></template>
<template #fallback><Spinner /></template>
</Suspense>
</ErrorBoundary>
</template>Suspense Bersifat Eksperimental
Per Vue 3.4, <Suspense> masih ditandai sebagai eksperimental—API-nya dapat berubah. Komponen asinkron itu sendiri (defineAsyncComponent) sudah stabil dan siap digunakan dalam produksi.
Kapan Menggunakan Komponen Asinkron
Kandidat yang baik: komponen rute, panel admin/pengaturan, modal yang dibuka sesuai kebutuhan, serta grafik/editor berat. Hindari untuk: komponen kecil dan komponen yang digunakan di setiap halaman (pecah dengan cara lain).
Pemeriksaan Singkat
Fungsi Vue 3 mana yang mengubah impor dinamis menjadi komponen yang dimuat secara malas?
Ringkasan: Komponen Asinkron & Suspense
defineAsyncComponent membungkus impor dinamis untuk pemuatan malas. Konfigurasikan loadingComponent, errorComponent, delay, dan timeout. Bundler menghasilkan potongan terpisah. Pemuatan malas tingkat rute melalui component: () => import('...'). <Suspense> merender tampilan cadangan saat dependensi asinkron diselesaikan (masih eksperimental). setup() asinkron dengan await tingkat atas berfungsi di dalam Suspense. onErrorCaptured menangkap kesalahan asinkron.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Komponen Asinkron dan Suspense” gratis?
Ya — teks lengkap “Komponen Asinkron dan Suspense” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Komponen Asinkron dan Suspense”?
Muat komponen secara malas dengan defineAsyncComponent, bungkus dalam , dan tampilkan konten cadangan saat bundel komponen dimuat. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 2 dari 4.
Berapa lama pelajaran “Komponen Asinkron dan Suspense” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- provide() dan inject() untuk Injeksi Dependensi
- Komponen Asinkron dan Suspense
- Direktif Khusus
- Sistem Plugin: app.use()