onDestroy: การล้างทรัพยากร
เรียกใช้ตรรกะยกเลิกการทำงาน เช่น ล้างตัวจับเวลาหรือยกเลิกการสมัคร เมื่อคอมโพเนนต์ถูกนำออก
onDestroy: การล้างทรัพยากร เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ใช้ onDestroy
onDestroy จะทำงานเมื่อคอมโพเนนต์ถูกนำออกจาก DOM ใช้เพื่อรื้อการตั้งค่าตัวรับฟัง ตัวจับเวลา หรือการสมัครรับข้อมูล
นำเข้าและเรียกใช้
นำเข้าจาก svelte แล้วส่งฟังก์ชันเรียกกลับ
<script>
import { onDestroy } from "svelte";
onDestroy(() => console.log("bye"));
</script>รูปแบบการทำความสะอาด
ยกเลิกตัวจับเวลา ยกเลิกคำขอดึงข้อมูล และยกเลิกการสมัครจากสโตร์
onDestroy(() => clearInterval(id));onDestroy หลายรายการ
เรียกได้มากเท่าที่จำเป็น การทำความสะอาดแต่ละรายการจะทำงาน
ทำงานบนเซิร์ฟเวอร์ด้วย
ต่างจาก onMount ตรงที่ onDestroy ทำงานบนเซิร์ฟเวอร์ระหว่างการรื้อ SSR ได้ด้วย
ใช้คู่กับ onMount
รูปแบบที่ใช้บ่อยคือ ตั้งค่าต่าง ๆ ใน onMount แล้วรื้อการตั้งค่าใน onDestroy
หรือคืนค่าจาก onMount โดยตรง
การคืนค่าฟังก์ชันจาก onMount เทียบเท่ากับ onDestroy สำหรับการทำความสะอาดแบบง่าย ๆ และทำให้โค้ดที่เกี่ยวข้องอยู่ใกล้กัน
หลีกเลี่ยงผลข้างเคียงใน destroy
ทำให้การทำความสะอาดเป็นแบบพร้อมกันและใช้เวลาไม่นาน งานอะซิงโครนัสที่ใช้เวลานานอาจทำไม่เสร็จก่อนการนำทาง
การสมัครสโตร์อัตโนมัติ
หากใช้รูปแบบย่อ $store Svelte จะยกเลิกการสมัครโดยอัตโนมัติเมื่อทำลายคอมโพเนนต์ จึงไม่ต้องใช้ onDestroy ด้วยตนเอง
หน่วยความจำรั่ว
การลืมทำความสะอาดเป็นแหล่งที่มาของหน่วยความจำรั่วใน SPA มากที่สุดเป็นอันดับหนึ่ง ควรรื้อการตั้งค่าตัวรับฟังที่คุณเพิ่มไว้ทั่วระบบเสมอ
หน้าเทียบกับคอมโพเนนต์
เมื่อเปลี่ยนเส้นทาง คอมโพเนนต์ของหน้าจะถูกทำลายและเรียกใช้ onDestroy ด้วย ใช้สำหรับล้างทรัพยากรเฉพาะหน้าด้วย
ตรวจสอบอย่างรวดเร็ว
วิธีที่ง่ายที่สุดในการเชื่อมการตั้งค่าและการล้างทรัพยากรเข้าด้วยกันคืออะไร
สรุป
onDestroy ทำงานเมื่อยกเลิกการเมานต์คอมโพเนนต์ ใช้สิ่งนี้หรือค่าที่คืนจาก onMount เพื่อล้างตัวรับฟังเหตุการณ์และตัวจับเวลา
คำถามที่พบบ่อย
บทเรียน “onDestroy: การล้างทรัพยากร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “onDestroy: การล้างทรัพยากร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “onDestroy: การล้างทรัพยากร”
เรียกใช้ตรรกะยกเลิกการทำงาน เช่น ล้างตัวจับเวลาหรือยกเลิกการสมัคร เมื่อคอมโพเนนต์ถูกนำออก คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “onDestroy: การล้างทรัพยากร” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- onMount: การทำงานหลังการแสดงผล
- onDestroy: การล้างทรัพยากร
- beforeUpdate และ afterUpdate
- tick(): รอการอัปเดต DOM