Giải thích computed signal bằng một ví dụ nhỏ

Computed signal là một giá trị chỉ đọc được suy ra từ các signal khác. Angular theo dõi những signal mà hàm đã đọc và chỉ tính lại khi một trong số đó thay đổi.

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

const price = signal(20)
const qty = signal(3)
const total = computed(() => price() * qty())

console.log(total()) // 60
qty.set(5)
console.log(total()) // 100

Có ba đặc điểm cần nhớ:

• Nó lazy: hàm không chạy cho đến khi có ai đọc total().
• Nó memoized: đọc hai lần mà không có thay đổi sẽ dùng lại kết quả đã cache.
• Nó chỉ đọc: không có total.set(...), nên giá trị luôn đi theo nguồn của nó.

Dependency được theo dõi lúc runtime, nên signal đọc bên trong nhánh if chỉ là dependency khi nhánh đó chạy. Dùng computed cho mọi thứ có thể tính từ state khác, như tổng tiền, danh sách đã lọc hay label.

Hãy suy ra bằng computed thay vì lưu cùng một dữ liệu hai lần.