Vue Academy · บทเรียน

onUnmounted และรูปแบบการล้างข้อมูล

การล้างช่วงเวลา การนำตัวรับฟังเหตุการณ์ออก และการยกเลิกคำขอใน onUnmounted

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

ล้างสิ่งที่เริ่มต้นไว้

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

ฮุก onUnmounted

onUnmounted ทำงานหลังจากคอมโพเนนต์ถูกนำออกจาก DOM แล้ว นี่คือโอกาสสุดท้ายในการคืนทรัพยากร

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

รูปแบบ: การล้างช่วงเวลา

หากคุณเริ่มช่วงเวลาใน onMounted ให้ล้างช่วงเวลานั้นใน onUnmounted มิฉะนั้น callback จะยังคงทำงานหลังจากคอมโพเนนต์หายไป และมักทำให้เกิดข้อผิดพลาดเมื่อเข้าถึงสถานะที่ไม่มีอยู่

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

รูปแบบ: การนำตัวรับฟังเหตุการณ์ออก

ตัวรับฟังส่วนกลางบน window หรือ document จะยังคงอยู่แม้คอมโพเนนต์ถูกนำออกแล้ว ให้จับคู่ addEventListener กับ removeEventListener เสมอ

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

รูปแบบ: การยกเลิกคำขอดึงข้อมูล

คำขอที่ยังรอดำเนินการและเสร็จสิ้นหลังการถอดเมานต์อาจตั้งค่าสถานะให้คอมโพเนนต์ที่ถูกทำลายแล้ว ให้ใช้ AbortController เพื่อยกเลิกคำขอระหว่างการล้างทรัพยากร

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

รูปแบบ: การยกเลิกการสมัครรับข้อมูล

การสมัครรับข้อมูลจากสโตร์ ซ็อกเก็ต หรือบัสเหตุการณ์ต้องถูกยกเลิก ให้บันทึกฟังก์ชันยกเลิกการสมัครรับข้อมูลไว้ แล้วเรียกใช้ใน onUnmounted

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch ส่งคืนฟังก์ชันหยุดการทำงาน

การเรียกใช้ watch จะส่งคืนฟังก์ชันที่ใช้หยุดการทำงาน การเฝ้าดูที่สร้างขึ้นระหว่างการตั้งค่าจะหยุดโดยอัตโนมัติ แต่การเฝ้าดูที่สร้างขึ้นภายหลัง เช่น ภายใน callback อื่น ควรหยุดด้วยตนเอง

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

ฟังก์ชันล้างทรัพยากรของ watchEffect

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

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

เหตุใดการล้างทรัพยากรจึงสำคัญ

การข้ามขั้นตอนการล้างทรัพยากรนำไปสู่หน่วยความจำรั่ว (ทรัพยากรไม่เคยถูกคืน), ตัวรับฟังซ้ำซ้อน (การเมานต์หลายครั้งสะสมกัน) และข้อผิดพลาด (callback เข้าถึงสถานะที่ถูกทำลายแล้ว) โค้ดที่ดีจะยกเลิกสิ่งที่เริ่มต้นไว้เสมอ

Composables ทำให้เป็นอัตโนมัติ

Composables ที่เขียนอย่างดีจะลงทะเบียนการล้างทรัพยากรของตัวเองใน onUnmounted นี่คือเหตุผลที่ composables ของ VueUse เช่น useEventListener นำตัวรับฟังออกให้คุณ — การล้างทรัพยากรถูกสร้างไว้ในตัวแล้ว

รายการตรวจสอบการล้างทรัพยากร

setInterval/setTimeout -> ล้างการทำงานเหล่านั้น
addEventListener -> นำตัวรับฟังออก
fetch -> ยกเลิกด้วย AbortController
การสมัครรับข้อมูล -> เรียกใช้ unsubscribe
การเฝ้าดูที่จัดการด้วยตนเอง -> เรียกใช้ฟังก์ชัน stop ที่ส่งคืนมา

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

ทดสอบความรู้เกี่ยวกับการล้างทรัพยากรของคุณ

สรุปทบทวน

สิ่งสำคัญของการล้างทรัพยากร:

onUnmounted ทำงานหลังการนำออก — ให้คืนทรัพยากรที่นี่
ล้างช่วงเวลาและการหมดเวลา นำตัวรับฟังออก ยกเลิกการดึงข้อมูล และยกเลิกการสมัครรับข้อมูล
watch ส่งคืนฟังก์ชันหยุดการทำงาน ให้เรียกใช้ใน onUnmounted เมื่อจำเป็น
watchEffect มี callback onCleanup สำหรับล้างทรัพยากรในแต่ละรอบ

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

บทเรียน “onUnmounted และรูปแบบการล้างข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “onUnmounted และรูปแบบการล้างข้อมูล”

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

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

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

บทเรียน “onUnmounted และรูปแบบการล้างข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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

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