Angular Signals คืออะไร?

Question

Accepted Answer

**Signals** คือ reactive primitive ของ Angular (เพิ่มใน Angular 16+) สำหรับการจัดการสถานะ — อ็อบเจกต์ที่ห่อหุ้มค่าที่ **แจ้งให้ผู้บริโภคทราบเมื่อเปลี่ยนแปลง** ซึ่งช่วยให้สามารถอัปเดตแบบละเอียด อัปเดตที่มีประสิทธิภาพ โดยไม่ต้องพึ่งพา Zone.js change detection ## การสร้างและใช้ signal ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## การอ่าน signal: เรียกเป็นฟังก์ชัน ```html ``` Signals **อ่านโดยการเรียก** (`count()`) ไม่ใช่เป็น properties ธรรมดา ในเทมเพลต Angular จะติดตามอย่างแม่นยำว่า signal ใดที่ view อ่าน ดังนั้นเมื่อ signal เปลี่ยนแปลง เฉพาะส่วนที่ได้รับผลกระทบเท่านั้นที่จะอัปเดต ## สามประเภท signal ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` ขี้เกียจและแคช (เหมือน Vue computed); `effect` รัน side effects อย่างมีปฏิกิริยา (เหมือน watcher) ## ทำไม signal จึงสำคัญ: reactivity ที่ละเอียด ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Signals ให้ Angular **การติดตามการพึ่งพาที่แม่นยำ** — เมื่อ signal เปลี่ยนแปลง เฉพาะ views และ computeds ที่อ่านจริงเท่านั้นที่จะอัปเดต นี่มีประสิทธิภาพมากกว่า change detection ที่กว้างขวาง ที่ Zone.js ทริกเกอร์ และเป็นรากฐานสำหรับการลบ Zone.js ออกไปเลย (zoneless mode) ## Signal-based inputs (ใหม่กว่า) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## ทำไมจึงสำคัญ Signals เป็นการพัฒนาครั้งใหญ่ล่าสุดในระบบ reactivity ของ Angular — แบบจำลองที่ง่ายกว่า ชัดเจนกว่า และมีประสิทธิภาพมากกว่าการตรวจจับการเปลี่ยนแปลง Zone.js ที่ซ่อนอยู่ พวกมันเปิดใช้งานอัปเดตที่ละเอียด ลดการตรวจสอบที่ไม่จำเป็น รวมเข้าด้วยกันอย่างสะอาดกับ computed/effect และปูทางสำหรับ zoneless Angular การทำความเข้าใจ signals เป็นสิ่งสำคัญมากขึ้นเรื่อยๆ เนื่องจาก Angular กำหนดทิศทางการพัฒนาใหม่ไปสู่พวกมันในฐานะ state primitive เริ่มต้น