Frontend Academy · บทเรียน

คอมโพเนนต์อะซิงก์และ Suspense

โหลดคอมโพเนนต์แบบขี้เกียจด้วย defineAsyncComponent ครอบด้วย และแสดงเนื้อหาสำรองระหว่างโหลดชุดคอมโพเนนต์

คอมโพเนนต์อะซิงก์และ Suspense เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้คอมโพเนนต์แบบอะซิงโครนัส

การโหลดคอมโพเนนต์ขนาดใหญ่หรือไม่ค่อยได้ใช้เมื่อจำเป็น เช่น แผงผู้ดูแลระบบหรือไลบรารีกราฟ จะช่วยให้บันเดิลเริ่มต้นมีขนาดเล็ก Vue ใช้ defineAsyncComponent จัดการวงจรการนำเข้าแบบไดนามิก

defineAsyncComponent

ส่งฟังก์ชันตัวโหลดที่คืนค่าพรอมิสซึ่งจะคลี่ไปเป็นคอมโพเนนต์ Vue จะจัดการการโหลด ข้อผิดพลาด และระยะหมดเวลาให้

import { defineAsyncComponent } from 'vue';

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

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

การกำหนดค่าพฤติกรรมแบบอะซิงโครนัส

ส่งอ็อบเจ็กต์ตัวเลือกเพื่อปรับแต่งส่วนติดต่อขณะโหลด ส่วนติดต่อเมื่อเกิดข้อผิดพลาด ระยะหน่วงก่อนโหลด และระยะหมดเวลา

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

การแยกชังก์โดยเครื่องมือรวมบันเดิล

การนำเข้าแบบไดนามิกจะกลายเป็นชังก์แยกต่างหากในเอาต์พุต ใช้คอมเมนต์พิเศษของ Vite/webpack เพื่อตั้งชื่อและพรีเฟตช์

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

การโหลดแบบขี้เกียจระดับเส้นทาง

Vue Router รองรับคอมโพเนนต์แบบอะซิงโครนัสโดยตรงในคำจำกัดความของเส้นทาง

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

คอมโพเนนต์ Suspense

คอมโพเนนต์ทดลอง <Suspense> ของ Vue จะแสดงเนื้อหาสำรองขณะที่ทรัพยากรอะซิงโครนัสใด ๆ ในแผนผังยังรอดำเนินการ

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

setup() แบบอะซิงโครนัส

setup() สามารถทำงานแบบอะซิงโครนัสได้ โดย Vue จะรอให้ทำงานเสร็จก่อนเรนเดอร์ และใช้งานภายใน 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 -->

การจัดการข้อผิดพลาดด้วย onErrorCaptured

ใช้ onErrorCaptured ในคอมโพเนนต์แม่เพื่อดักจับข้อผิดพลาดจากคอมโพเนนต์แบบอะซิงโครนัสหรือ setup แบบอะซิงโครนัส

import { onErrorCaptured } from 'vue';

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

การรวม Suspense กับขอบเขตดักจับข้อผิดพลาด

ครอบแผนผังคอมโพเนนต์แบบอะซิงโครนัสด้วยทั้ง Suspense สำหรับการโหลด และคอมโพเนนต์บรรพบุรุษที่ดักจับข้อผิดพลาดสำหรับจัดการข้อผิดพลาด

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

Suspense ยังอยู่ในระยะทดลอง

ตั้งแต่ Vue 3.4 เป็นต้นมา <Suspense> ยังคงระบุว่าเป็นฟีเจอร์ทดลอง ดังนั้น API อาจเปลี่ยนแปลงได้ ส่วนคอมโพเนนต์แบบอะซิงโครนัสเอง (defineAsyncComponent) มีความเสถียรและพร้อมใช้งานจริง

ควรใช้คอมโพเนนต์แบบอะซิงโครนัสเมื่อใด

ตัวเลือกที่เหมาะสม ได้แก่ คอมโพเนนต์ของเส้นทาง แผงผู้ดูแลระบบหรือการตั้งค่า หน้าต่างโมดัลที่เปิดเมื่อจำเป็น และกราฟหรือตัวแก้ไขขนาดใหญ่ ควรหลีกเลี่ยงสำหรับคอมโพเนนต์ขนาดเล็ก และคอมโพเนนต์ที่ใช้ในทุกหน้า ซึ่งควรแยกด้วยวิธีอื่น

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ฟังก์ชันใดของ Vue 3 ที่เปลี่ยนการนำเข้าแบบไดนามิกให้เป็นคอมโพเนนต์ที่โหลดแบบขี้เกียจ

ทบทวน: คอมโพเนนต์แบบอะซิงโครนัสและ Suspense

defineAsyncComponent ห่อการนำเข้าแบบไดนามิกเพื่อให้โหลดแบบขี้เกียจ กำหนดค่า loadingComponent, errorComponent, delay และ timeout ได้ เครื่องมือรวมบันเดิลจะสร้างชังก์แยกต่างหาก การโหลดแบบขี้เกียจระดับเส้นทางทำได้ผ่าน component: () => import('...') ส่วน <Suspense> จะแสดงเนื้อหาสำรองขณะที่ทรัพยากรอะซิงโครนัสกำลังคลี่ค่า แต่ยังอยู่ในระยะทดลอง setup() แบบอะซิงโครนัสที่มี await ระดับบนสุดทำงานภายใน Suspense ได้ และ onErrorCaptured ใช้ดักจับข้อผิดพลาดแบบอะซิงโครนัส

คำถามที่พบบ่อย

บทเรียน “คอมโพเนนต์อะซิงก์และ Suspense” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คอมโพเนนต์อะซิงก์และ Suspense” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์อะซิงก์และ Suspense”

โหลดคอมโพเนนต์แบบขี้เกียจด้วย defineAsyncComponent ครอบด้วย และแสดงเนื้อหาสำรองระหว่างโหลดชุดคอมโพเนนต์ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “คอมโพเนนต์อะซิงก์และ Suspense” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

provide() และ inject() สำหรับการฉีดการพึ่งพา
คอมโพเนนต์อะซิงก์และ Suspense
คำสั่งกำหนดเอง
ระบบปลั๊กอิน: app.use()

← กลับไปที่ Frontend Academy