การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร
ทำความเข้าใจวงจรการตรวจจับการเปลี่ยนแปลงของ Angular
การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตรวจจับการเปลี่ยนแปลงคืออะไร
การตรวจจับการเปลี่ยนแปลง คือกระบวนการที่ Angular ใช้เพื่อทำให้ DOM สอดคล้องกับสถานะของคอมโพเนนต์ เมื่อข้อมูลเปลี่ยนแปลง Angular จะประเมินการผูกค่าใหม่และอัปเดตเฉพาะส่วนที่แตกต่าง
รอบการตรวจจับ
Angular จะเดินผ่านแผนผังคอมโพเนนต์จากรากลงมา เพื่อตรวจสอบการผูกค่าของคอมโพเนนต์แต่ละตัว การดำเนินการจากบนลงล่างนี้เรียกว่ารอบการตรวจจับการเปลี่ยนแปลงหนึ่งรอบ (tick)
อะไรเป็นตัวกระตุ้นรอบตรวจสอบ
โดยค่าเริ่มต้น Angular จะเรียกใช้การตรวจจับการเปลี่ยนแปลงหลังเหตุการณ์แบบอะซิงก์ เช่น เหตุการณ์ DOM ตัวจับเวลา และการตอบกลับ HTTP การทำงานนี้ประสานโดย Zone.js
Zone.js
Zone.js ดัดแปลง API แบบอะซิงก์ (setTimeout, addEventListener, Promise, XHR) เพื่อให้ Angular ทราบว่าเมื่อใดการทำงานหนึ่งเสร็จสิ้นและอาจจำเป็นต้องเริ่มรอบตรวจสอบ
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone ทำหน้าที่ครอบ Zone.js สำหรับ Angular คุณสามารถเรียกใช้โค้ดนอกโซนของ Angular เพื่อหลีกเลี่ยงการกระตุ้นการตรวจจับการเปลี่ยนแปลงในลูปที่ทำงานถี่
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});การกลับเข้าสู่โซน
หากต้องการอัปเดตส่วนติดต่อผู้ใช้จากภายนอกโซน ให้กลับเข้าสู่โซนด้วย run เพื่อให้ Angular จัดตารางรอบตรวจสอบ
this.zone.run(() => {
this.ready = true;
});กลยุทธ์เริ่มต้น
ด้วยกลยุทธ์เริ่มต้น คอมโพเนนต์ทุกตัวจะถูกตรวจสอบในแต่ละรอบ วิธีนี้เรียบง่ายและปลอดภัย แต่อาจสิ้นเปลืองในแผนผังขนาดใหญ่
การเปรียบเทียบการผูกค่า
Angular เปรียบเทียบค่าปัจจุบันของการผูกค่าแต่ละรายการกับค่าก่อนหน้าโดยใช้ Object.is หากค่าไม่เปลี่ยนแปลง ก็จะไม่แก้ไข DOM
นิพจน์ควรบริสุทธิ์
นิพจน์ในแม่แบบจะทำงานในทุกครั้งที่ตรวจสอบ จึงต้องทำงานรวดเร็วและไม่มีผลข้างเคียง หลีกเลี่ยงการเรียกฟังก์ชันที่ใช้ทรัพยากรมากโดยตรงในแม่แบบ
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
ในโหมดพัฒนา Angular จะทำรอบตรวจสอบยืนยันครั้งที่สอง หากค่ามีการเปลี่ยนแปลงระหว่างสองรอบ คุณจะได้รับ ExpressionChangedAfterItHasBeenCheckedError ซึ่งบ่งชี้ว่าสถานะถูกเปลี่ยนแปลงระหว่างการแสดงผล
การควบคุมด้วยตนเอง
ฉีด ChangeDetectorRef เพื่อควบคุมการตรวจจับ โดย markForCheck(), detectChanges() และ detach() ช่วยให้ควบคุมได้อย่างละเอียด
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจของคุณเกี่ยวกับการตรวจจับการเปลี่ยนแปลง
สรุปทบทวน
คุณได้เรียนรู้ว่าการตรวจจับการเปลี่ยนแปลงคือการเดินผ่านแผนผังจากบนลงล่างเพื่อทำให้สถานะสอดคล้องกับ DOM โดยถูกกระตุ้นจากเหตุการณ์แบบอะซิงก์ผ่าน Zone.js/NgZone และเปรียบเทียบการผูกค่าด้วย Object.is ส่วน ChangeDetectorRef ช่วยให้ควบคุมได้ด้วยตนเอง
คำถามที่พบบ่อย
บทเรียน “การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร”
ทำความเข้าใจวงจรการตรวจจับการเปลี่ยนแปลงของ Angular คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร
- การตรวจจับการเปลี่ยนแปลงแบบ OnPush
- Angular แบบไร้โซน
- การปรับประสิทธิภาพรายการและการเรนเดอร์