Angular Academy · Lección

Señales computadas

Obtenga valores derivados que se actualicen automáticamente.

Señales computadas es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué es una señal computed

Una señal computed() deriva un valor a partir de una o varias señales. Cada vez que cambia una señal de origen, el valor calculado se vuelve a calcular de forma perezosa: solo cuando algo lo lee.

Las señales computed son de solo lectura: no puede llamar a .set() en ellas.

Crear una computed

Pase una función a computed(). Angular realiza un seguimiento automático de cada señal que lea dentro de ella.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Seguimiento automático de dependencias

Nunca debe declarar las dependencias manualmente. Leer price() y quantity() dentro de la callback las registra automáticamente como dependencias.

Si una señal se lee de forma condicional y no se llega a ella, no se registra en esa ejecución.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Evaluación perezosa y memoización

Una computed solo se ejecuta cuando se lee y almacena en caché su resultado. Si la lee dos veces sin cambios en el origen, la función se ejecuta una sola vez.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Encadenar señales computed

Las señales computed pueden depender de otras señales computed, formando un grafo reactivo.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Usar computed en un componente

Las señales computed resultan especialmente útiles en los componentes. La plantilla solo se vuelve a renderizar cuando el valor calculado cambia realmente.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Las computed son de solo lectura

Intentar establecer una señal computed produce un error de compilación. Existen exclusivamente para expresar estado derivado.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Igualdad y recomputaciones omitidas

De forma predeterminada, una computed usa Object.is para comparar. Si el nuevo valor calculado es igual al anterior, no se notifica a las dependencias, lo que evita trabajo innecesario.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Función de igualdad personalizada

Puede pasar una opción equal para controlar cuándo se considera que una computed ha cambiado; resulta útil para objetos o arrays.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Evitar efectos secundarios en computed

Una computed debe ser pura: no debe realizar llamadas HTTP, registrar información como comportamiento ni modificar otras señales. Los efectos secundarios corresponden a effect(). Mantener la computed pura hace que el grafo reactivo sea predecible.

Computed frente a métodos

Un método de plantilla se ejecuta en cada ciclo de detección de cambios. Una computed solo se ejecuta cuando cambian sus dependencias y almacena el resultado en caché, por lo que es mucho más eficiente para valores derivados.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Comprobación rápida

Compruebe su comprensión de las señales computed.

Resumen: señales computed

Ha aprendido que computed() crea señales derivadas de solo lectura con seguimiento automático de dependencias, evaluación perezosa y memoización.

Manténgalas puras: sin efectos secundarios.
Pueden depender de otras señales computed.
Use equal para personalizar la detección de cambios.

A continuación: ejecutar efectos secundarios con effect().

Preguntas frecuentes

¿La lección «Señales computadas» es gratis?

Sí — el texto completo de «Señales computadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Señales computadas»?

Obtenga valores derivados que se actualicen automáticamente. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Señales computadas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy