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

การอัปเดตสัญญาณด้วย set และ update

เปลี่ยนค่าสัญญาณแบบรีแอกทีฟ

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

การเปลี่ยนค่า Signal

คุณสามารถเปลี่ยน signal ที่เขียนค่าได้สองวิธี: ใช้ set() เพื่อแทนที่ค่า และใช้ update() เพื่อสร้างค่าใหม่จากค่าปัจจุบัน

การใช้ set()

set(newValue) จะแทนที่ค่า signal ทั้งหมดด้วยค่าที่คุณส่งเข้าไป

const c = signal(0);
c.set(1);
console.log(c()); // 1

ควรใช้ set() เมื่อใด

ใช้ set() เมื่อค่าใหม่ไม่ได้ขึ้นอยู่กับค่าเดิม เช่น การกำหนดค่าที่ได้รับใหม่จากข้อมูลที่ผู้ใช้ป้อนหรือการตอบกลับจาก API

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

การใช้ update()

update(fn) รับฟังก์ชันที่ได้รับค่าปัจจุบันและคืนค่าใหม่ เหมาะอย่างยิ่งเมื่อค่าถัดไปขึ้นอยู่กับค่าก่อนหน้า

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

การเพิ่มค่าด้วย update()

ตัวนับแบบคลาสสิกใช้ update() เพื่อเพิ่มค่าจากจำนวนปัจจุบัน

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

การอัปเดตออบเจ็กต์โดยไม่แก้ไขค่าเดิม

เนื่องจากการตรวจจับการเปลี่ยนแปลงเปรียบเทียบการอ้างอิง จึงควรแทนที่ออบเจ็กต์แทนการแก้ไขออบเจ็กต์เดิม ให้กระจายค่าเดิมลงในออบเจ็กต์ใหม่

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

การอัปเดตอาร์เรย์โดยไม่แก้ไขค่าเดิม

สำหรับอาร์เรย์ ให้คืนอาร์เรย์ใหม่ หลีกเลี่ยงการใช้ push/splice กับอาร์เรย์เดิม ให้ใช้ spread หรือเมธอดของอาร์เรย์ที่คืนอาร์เรย์ใหม่

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

สรุป set() กับ update()

set: คุณมีค่าสุดท้ายอยู่แล้ว update: คุณคำนวณค่าสุดท้ายจากค่าปัจจุบัน ทั้งสองวิธีจะแจ้งให้ผู้ใช้ทราบหากค่ามีการเปลี่ยนแปลงจริง

ความเท่ากันของการอ้างอิงและการเปลี่ยนแปลง

โดยค่าเริ่มต้น Signals ใช้ความเท่ากันของการอ้างอิง (หรือความเท่ากันของค่าสำหรับชนิดข้อมูลพื้นฐาน) เพื่อตัดสินว่ามีอะไรเปลี่ยนแปลงหรือไม่ การกำหนด signal ให้เป็นค่าพื้นฐานเดิมทุกประการจะไม่แจ้งสิ่งที่ขึ้นต่อกัน

const c = signal(5);
c.set(5); // no change, dependents not notified

ไม่แนะนำให้แก้ไขค่าเดิม

API รุ่นเก่ามีเมธอด mutate() แต่แนวทางสมัยใหม่ที่แนะนำคือการอัปเดตโดยไม่แก้ไขค่าเดิม ด้วย set() และ update() ที่คืนการอ้างอิงใหม่

การอัปเดต Signals ในเมธอด

ในคอมโพเนนต์ ให้ห่อการอัปเดต signal ไว้ในเมธอดที่แม่แบบสามารถเรียกใช้จากตัวจัดการเหตุการณ์ได้

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

ตรวจสอบสั้น ๆ: set กับ update

เลือกเครื่องมือที่เหมาะกับงาน

สรุป: การอัปเดต Signals

คุณได้เรียนรู้การใช้ set() เพื่อแทนที่ค่า และ update(fn) เพื่อคำนวณค่าใหม่จากค่าปัจจุบัน นอกจากนี้ยังได้เห็นวิธีอัปเดตออบเจ็กต์และอาร์เรย์โดยไม่เปลี่ยนแปลงข้อมูลเดิม เพื่อให้การเท่ากันของการอ้างอิงตรวจจับการเปลี่ยนแปลงได้ ต่อไป: การใช้ Signals โดยตรงในเทมเพลต

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

บทเรียน “การอัปเดตสัญญาณด้วย set และ update” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การอัปเดตสัญญาณด้วย set และ update”

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

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

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

บทเรียน “การอัปเดตสัญญาณด้วย set และ update” ใช้เวลานานแค่ไหน

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

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

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

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

  1. สัญญาณคืออะไร
  2. การสร้างและอ่านสัญญาณ
  3. การอัปเดตสัญญาณด้วย set และ update
  4. สัญญาณในเทมเพลต
← กลับไปที่ Angular Academy