Angular Academy · บทเรียน

การอนุมานสถานะด้วย computed

สร้างโมเดลสำหรับอ่านจากสถานะพื้นฐาน

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

สถานะที่คำนวณต่อยอด

บ่อยครั้งสถานะจะถูกคำนวณจากสถานะอื่น เช่น ยอดรวมจากรายการ รายการที่กรองแล้ว หรือแฟล็กแสดงความถูกต้อง Angular ใช้ computed() สร้างสัญญาณแบบอ่านอย่างเดียวที่ค่ามาจากสัญญาณอื่น

การสร้าง computed

ส่งฟังก์ชันให้ computed() ฟังก์ชันนี้จะอ่านสัญญาณอื่นและส่งคืนค่า ผลลัพธ์จะถูกคำนวณใหม่เฉพาะเมื่อสิ่งที่เป็นข้อพึ่งพาเปลี่ยนแปลง

import { signal, computed } from '@angular/core';

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

การติดตามข้อพึ่งพาโดยอัตโนมัติ

คุณไม่ต้องประกาศข้อพึ่งพา สัญญาณใดก็ตามที่อ่านภายในฟังก์ชันจะกลายเป็นข้อพึ่งพาโดยอัตโนมัติ เมื่อ qty เปลี่ยน total จะคำนวณใหม่ แต่หากสัญญาณที่ไม่เกี่ยวข้องเปลี่ยน ก็จะไม่เกิดขึ้น

การจำผลลัพธ์

computed() จะเก็บผลลัพธ์ไว้ในแคช การอ่านหลายครั้งจะเรียกใช้ฟังก์ชันเพียงครั้งเดียวจนกว่าข้อพึ่งพาจะเปลี่ยนแปลง ทำให้โมเดลการอ่านที่คำนวณต่อยอดมีต้นทุนต่ำ แม้จะถูกใช้ในการผูกข้อมูลของแม่แบบหลายจุด

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

Computed ในคลัง

ภายในคลังสัญญาณ ให้เปิดเผยโมเดลการอ่านที่คำนวณต่อยอด เพื่อให้คอมโพเนนต์ใช้ค่าที่พร้อมแสดงผลแทนการคำนวณซ้ำในแม่แบบ

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

การต่อ computed เป็นลำดับ

สัญญาณที่คำนวณต่อยอดสามารถอ่านสัญญาณที่คำนวณต่อยอดตัวอื่นได้ สร้างโมเดลการอ่านเป็นชั้น ๆ โดยให้การคำนวณพื้นฐานป้อนเข้าสู่การคำนวณระดับสูงขึ้น

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

การกรองและการค้นหา

โมเดลการอ่านที่พบได้บ่อยคือการกรองรายการตามสัญญาณค้นหา ผลลัพธ์ที่กรองแล้วจะอัปเดตทุกครั้งที่รายการหรือ query เปลี่ยนแปลง

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

ไม่มีผลข้างเคียง

ฟังก์ชัน computed() ต้องบริสุทธิ์ โดยอ่านสัญญาณและส่งคืนค่าเท่านั้น ห้ามเปลี่ยนสถานะ เรียก API หรือเขียนไปยังสัญญาณอื่นภายในฟังก์ชันนี้ หากต้องการผลข้างเคียง ให้ใช้ effect() แทน

ความเท่ากันและการข้ามการอัปเดต

โดยค่าเริ่มต้น computed จะใช้ความเท่ากันตามการอ้างอิง (Object.is) เพื่อตัดสินว่าค่าเปลี่ยนหรือไม่ หากค่าใหม่เท่ากับค่าเดิม ผู้ใช้จะไม่ได้รับการแจ้งเตือน จึงหลีกเลี่ยงการทำงานที่ไม่จำเป็น

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

การใช้ computed ในแม่แบบ

อ่านสัญญาณที่คำนวณต่อยอดในแม่แบบได้เช่นเดียวกับสัญญาณทั่วไป Angular จะอัปเดตเฉพาะการผูกข้อมูลที่ค่าคำนวณต่อยอดเปลี่ยนจริง

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

Computed เทียบกับเมธอด

ใช้ computed() สำหรับค่าที่คำนวณจากสถานะ ซึ่งควรอัปเดตและจดจำผลลัพธ์โดยอัตโนมัติ ใช้เมธอดธรรมดาสำหรับการคำนวณเฉพาะครั้งที่รับอาร์กิวเมนต์ หรือต้องการให้ทำงานเมื่อเรียก

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความเข้าใจเกี่ยวกับสัญญาณที่คำนวณต่อยอด

สรุปทบทวน

คุณได้สร้างสถานะที่คำนวณต่อยอดด้วย computed() ซึ่งประกอบด้วยการติดตามข้อพึ่งพาโดยอัตโนมัติ ฟังก์ชันบริสุทธิ์ที่จดจำผลลัพธ์ โมเดลการอ่านที่ต่อเป็นลำดับได้ และการข้ามการอัปเดตเมื่อค่าเท่ากัน เปิดเผยโมเดลการอ่านที่คำนวณต่อยอดจากคลัง เพื่อให้แม่แบบยังคงเป็นการประกาศสิ่งที่ต้องการอย่างชัดเจน

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

บทเรียน “การอนุมานสถานะด้วย computed” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การอนุมานสถานะด้วย computed”

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

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

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

บทเรียน “การอนุมานสถานะด้วย computed” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Angular Academy