Vue Academy · บทเรียน

คอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent

defineAsyncComponent(), loadingComponent, errorComponent และตัวเลือก delay กับ timeout

บทเรียน 2 จาก 413 ขั้นตอน

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

เหตุผลที่ใช้คอมโพเนนต์แบบอะซิงโครนัส

defineAsyncComponent ช่วยให้คุณโหลดคอมโพเนนต์แบบเมื่อจำเป็นได้ โดยจะดึงโค้ดก็ต่อเมื่อมีการเรนเดอร์คอมโพเนนต์นั้นเป็นครั้งแรก

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

รูปแบบฟังก์ชันตัวโหลด

การใช้งานที่ง่ายที่สุดคือส่งฟังก์ชันตัวโหลดที่คืนค่าการ import() แบบไดนามิก Vite/webpack จะแยกการนำเข้านั้นเป็นชังก์ของตัวเองโดยอัตโนมัติ

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

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

<template>
  <SettingsModal v-if="showSettings" />
</template>

รูปแบบออบเจ็กต์ตัวเลือก

หากต้องการควบคุมได้ละเอียดขึ้น ให้ส่งออบเจ็กต์ตัวเลือก ฟิลด์สำคัญมีดังนี้:

ตัวโหลด — ฟังก์ชันนำเข้าแบบไดนามิก
loadingComponent — แสดงระหว่างกำลัง loading
errorComponent — แสดงหากการโหลดล้มเหลว
ความหน่วง / timeout — ตัวควบคุมด้านเวลา

import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue'
import ErrorView from './ErrorView.vue'

const AsyncChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: Loading,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 5000
})

ความหน่วง: ป้องกันตัวหมุนโหลดปรากฏขึ้นชั่วขณะ

ตัวเลือก delay (ค่าเริ่มต้น 200 มิลลิวินาที) กำหนดระยะเวลาที่ Vue จะรอก่อนแสดง loadingComponent หากชังก์โหลดเสร็จเร็วกว่าความหน่วง ก็จะไม่แสดงตัวหมุนโหลดเลย

กำหนด delay: 0 เพื่อแสดงสถานะกำลังโหลดทันที

const AsyncPanel = defineAsyncComponent({
  loader: () => import('./Panel.vue'),
  loadingComponent: Spinner,
  // wait 300ms before showing Spinner
  delay: 300
})

timeout: การล้มเหลวเมื่อโหลดช้า

ตัวเลือก timeout กำหนดเวลาสูงสุดที่รอ หากตัวโหลดไม่ดำเนินการเสร็จภายใน timeout มิลลิวินาที ระบบจะแสดง errorComponent และบันทึกข้อผิดพลาด

โดยค่าเริ่มต้นจะไม่มี timeout การโหลดจะรอไปเรื่อย ๆ

const AsyncReport = defineAsyncComponent({
  loader: () => import('./Report.vue'),
  errorComponent: ErrorView,
  // fail if not loaded within 10s
  timeout: 10000
})

การเรียกกลับด้วย onError

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

จุดนี้คือที่สำหรับใช้ตรรกะการลองใหม่แบบจำกัดจำนวนครั้งกับเครือข่ายที่ไม่เสถียร

const AsyncWidget = defineAsyncComponent({
  loader: () => import('./Widget.vue'),
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      retry()   // try loading again
    } else {
      fail()    // give up, show errorComponent
    }
  }
})

การตัดสินใจระหว่างลองใหม่กับทำให้ล้มเหลว

ภายใน onError คุณต้องเรียก retry() หรือ fail() อย่างใดอย่างหนึ่งเพียงรายการเดียว (หรือไม่เรียกทั้งสองรายการ ซึ่งก็ถือว่าล้มเหลวเช่นกัน) กลยุทธ์ทั่วไปคือ ลองใหม่สองสามครั้งเมื่อเกิดข้อผิดพลาดของเครือข่าย แต่ให้ล้มเหลวทันทีเมื่อเกิดข้อผิดพลาดทางไวยากรณ์หรือชังก์ ซึ่งการลองใหม่ไม่สามารถแก้ไขได้

onError(error, retry, fail, attempts) {
  const isNetwork = /Loading chunk/.test(error.message)
  if (isNetwork && attempts <= 2) {
    retry()
  } else {
    fail()
  }
}

การใช้ร่วมกับ Suspense

เมื่อคอมโพเนนต์แบบอะซิงโครนัสอยู่ภายในขอบเขต Suspense ขอบเขตนั้นจะเป็นผู้ควบคุมสถานะกำลังโหลดแทน ในกรณีนี้ loadingComponent ของคอมโพเนนต์เองจะถูกเพิกเฉย เพราะ fallback ของ Suspense มีผลเหนือกว่า

<template>
  <Suspense>
    <AsyncChart />  <!-- loadingComponent ignored here -->
    <template #fallback>Loading chart...</template>
  </Suspense>
</template>

การตั้งชื่อชังก์เพื่อการแก้ไขจุดบกพร่อง

คุณสามารถตั้งชื่อชังก์ที่สร้างขึ้นด้วยคอมเมนต์พิเศษ วิธีนี้ทำให้คำขอเครือข่ายและรายงานชุดรวมโค้ดอ่านได้ง่ายขึ้น

const AsyncEditor = defineAsyncComponent(() =>
  import(
    /* webpackChunkName: "editor" */
    './RichTextEditor.vue'
  )
)

คอมโพเนนต์แบบอะซิงโครนัสกับพร็อพ

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

<template>
  <AsyncProfile
    :user-id="id"
    @save="handleSave"
  />
</template>

<!-- AsyncProfile resolves to the real component, props/events pass through -->

แนวปฏิบัติที่ดี: ระวังการโหลดส่วนต้นหน้าจอแบบล่าช้า

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

// Good candidate: modal only opened on click
const Modal = defineAsyncComponent(() => import('./Modal.vue'))

// Poor candidate: hero shown immediately on load
// import Hero directly instead

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

ทดสอบความเข้าใจของคุณเกี่ยวกับ defineAsyncComponent

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

คุณได้เรียนรู้การโหลดคอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent:

รูปแบบตัวโหลดคืนค่า import() แบบไดนามิกเพื่อแยกโค้ด
รูปแบบตัวเลือกเพิ่ม loadingComponent, errorComponent, delay และ timeout
delay ช่วยป้องกันตัวหมุนโหลดปรากฏขึ้นชั่วขณะ ส่วน timeout ทำให้การโหลดที่ช้าล้มเหลว
onError(error, retry, fail, attempts) ใช้จัดการตรรกะการลองใหม่หรือทำให้ล้มเหลว
ภายใน Suspense fallback ของขอบเขตจะเข้ามาควบคุมส่วนติดต่อผู้ใช้ระหว่างกำลังโหลด

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “คอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent”

defineAsyncComponent(), loadingComponent, errorComponent และตัวเลือก delay กับ timeout คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

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

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

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

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

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

คอมโพเนนต์ Vue Suspense
คอมโพเนนต์แบบอะซิงโครนัสด้วย defineAsyncComponent
SSR แบบสตรีมด้วย renderToWebStream
กลยุทธ์การไฮเดรตแบบเลื่อนเวลา

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