Angular 9: Signals calculados con computed()
easy⏱ 5 mincourseangular
computed() rastrea sus dependencias automáticamente
const total = computed(() => price() * quantity()); lee dos signals dentro de su función. Angular detecta exactamente qué signals se leyeron durante esa ejecución y suscribe el signal calculado solo a esos — sin lista de dependencias manual, a diferencia de las APIs de estado derivado de otros frameworks. Si price o quantity cambian después, total se marca como obsoleto; la próxima vez que algo lea total(), se recalcula una vez y cachea el nuevo resultado.
const price = signal(10);
const quantity = signal(3);
const total = computed(() => price() * quantity());
total(); // 30, computed once and cached
total(); // 30, returned from cache, no recompute
quantity.set(5);
total(); // 50, recomputed because a dependency changed
computed() vs un getter plano
Un getter de TypeScript — get total() { return this.price * this.quantity; } — se ve parecido en un template ({{ total }}), pero no tiene memoria: cada lectura individual vuelve a ejecutar toda la función, hayan cambiado los inputs o no. En un template grande que se lee muchas veces por render, eso es trabajo desperdiciado. computed() cachea hasta que un cambio real de dependencia lo invalida, lo cual es más barato y además te da un signal genuino que podés pasar, leer en effect(), o componer dentro de otros computed().
Construí ShoppingCart
Declará items = signal<CartItem[]>([...]). Agregá total = computed(() => this.items().reduce((sum, i) => sum + i.price * i.quantity, 0)) y itemCount = computed(() => this.items().reduce((sum, i) => sum + i.quantity, 0)). Mostrá ambos en el template junto con la lista de ítems.