0Pricing
Sveltejs Academy · บทเรียน

onMount: การทำงานหลังการแสดงผล

เรียกใช้โค้ดหลังจากเพิ่มคอมโพเนนต์ลงใน DOM แล้ว

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

จุดประสงค์ของ onMount

onMount จะทำงานหลังจากเพิ่มคอมโพเนนต์ลงใน DOM เหมาะสำหรับเริ่มงานแบบอะซิงโครนัสหรือเข้าถึงการอ้างอิง

นำเข้า

นำเข้าจาก svelte ที่ด้านบนของสคริปต์

<script>
  import { onMount } from "svelte";
</script>

การใช้งานพื้นฐาน

ส่งฟังก์ชันที่ทำงานหนึ่งครั้งเมื่อเมานต์

onMount(() => {
  console.log("mounted");
});

การทำงานแบบอะซิงโครนัส

คุณสามารถใช้ async/await ภายในฟังก์ชัน หรือคืนค่าเป็นพรอมิสได้

onMount(async () => {
  data = await fetch("/api").then(r => r.json());
});

การเข้าถึงองค์ประกอบ

ใช้ร่วมกับ bind:this เพื่อจัดการ DOM ทันทีหลังการเมานต์

onMount(() => inputEl.focus());

ฟังก์ชันทำความสะอาด

คืนค่าฟังก์ชันจาก onMount เพื่อทำความสะอาดเมื่อคอมโพเนนต์ถูกถอดออก

onMount(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
});

เซิร์ฟเวอร์กับเบราว์เซอร์

onMount จะไม่ทำงานระหว่าง SSR ให้ใช้สำหรับโค้ดที่ทำงานเฉพาะบนเบราว์เซอร์ เช่น การตั้งค่า canvas หรือ WebGL

onMount หลายรายการ

คุณสามารถเรียก onMount หลายครั้งในคอมโพเนนต์เดียวกัน โดยจะทำงานตามลำดับการประกาศ

การสมัครรับข้อมูล

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

หลีกเลี่ยงงานหนัก

เลื่อนงานที่ไม่สำคัญออกไป หรือใช้ requestIdleCallback เพื่อไม่ให้ขัดขวางการวาดครั้งแรก

ความแตกต่างจาก beforeUpdate

onMount ทำงานเพียงครั้งเดียว ส่วน beforeUpdate ทำงานก่อนการอัปเดตแบบตอบสนองทุกครั้ง

ตรวจสอบความเข้าใจ

คุณทำความสะอาดตัวจับเวลาที่เริ่มใน onMount ได้อย่างไร

สรุป

onMount ทำงานหนึ่งครั้งหลังการเมานต์ ให้คืนค่าฟังก์ชันเพื่อจัดการการทำความสะอาด และจะไม่ทำงานบนเซิร์ฟเวอร์

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

บทเรียน “onMount: การทำงานหลังการแสดงผล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “onMount: การทำงานหลังการแสดงผล”

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

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

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

บทเรียน “onMount: การทำงานหลังการแสดงผล” ใช้เวลานานแค่ไหน

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

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

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

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

  1. onMount: การทำงานหลังการแสดงผล
  2. onDestroy: การล้างทรัพยากร
  3. beforeUpdate และ afterUpdate
  4. tick(): รอการอัปเดต DOM
← กลับไปที่ Sveltejs Academy