Angular 12: computed() a fondo — encadenamiento y pureza
easy⏱ 5 mincourseangular
Las señales computed encadenadas construyen un grafo de dependencias
total = computed(() => subtotal() + tax()) lee otras dos señales computed — Angular registra que total depende (transitivamente) de items, y vuelve a evaluar subtotal, luego tax, luego total, solo cuando items realmente cambia, y solo una vez por cambio, sin importar cuántos componentes lean total.
subtotal = computed(() => this.items().reduce((sum, i) => sum + i.price * i.qty, 0));
tax = computed(() => this.subtotal() * 0.08);
total = computed(() => this.subtotal() + this.tax());
Los callbacks de computed() deben ser puros
Nunca escribas en otra señal, llames a una API o mutes estado externo dentro de un computed(). Puede ejecutarse varias veces, omitirse, o ejecutarse de forma perezosa (solo cuando se lee) — los efectos secundarios dentro de él son impredecibles y no están soportados. Si necesitas un efecto secundario en reacción a una señal, para eso existe exactamente effect() (lección 13).
// ANTI-PATTERN — never do this inside computed():
total = computed(() => {
const t = this.subtotal() + this.tax();
this.lastTotal.set(t); // writing to a signal inside computed() is unsupported
return t;
});