Angular Academy · Lección

Derivar el estado con computed

Crear modelos de lectura a partir del estado base

Derivar el estado con computed es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 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.

Estado derivado

A menudo, el estado se calcula a partir de otro estado: un total a partir de elementos, una lista filtrada o un indicador de validez. El computed() de Angular crea un signal de solo lectura cuyo valor se deriva de otros signals.

Crear un computed

Pase una función a computed(). Esta lee otros signals y devuelve un valor. El resultado se vuelve a evaluar únicamente cuando cambia una de sus dependencias.

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

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

Seguimiento automático de dependencias

No es necesario declarar las dependencias. Los signals que lea dentro de la función se convierten automáticamente en dependencias. Si cambia qty, total se vuelve a calcular; si cambia un signal no relacionado, no.

Memoización

computed() almacena en caché su resultado. Leerlo muchas veces ejecuta la función una sola vez hasta que cambia una dependencia. Esto hace que los modelos de lectura derivados sean económicos incluso cuando se accede a ellos desde muchos enlaces de plantilla.

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

computed en un store

Dentro de un signal store, exponga modelos de lectura calculados para que los componentes consuman valores listos para renderizar, en lugar de volver a calcularlos en las plantillas.

@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));
}

Encadenar computed

Los signals calculados pueden leer otros signals calculados. Cree modelos de lectura por capas: una derivación base alimenta otra de nivel superior.

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

Filtrar y buscar

Un modelo de lectura habitual consiste en filtrar una lista mediante un signal de búsqueda. El resultado filtrado se actualiza cada vez que cambia la lista o la consulta.

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

Sin efectos secundarios

Una función computed() debe ser pura: solo lee signals y devuelve un valor. No modifique el estado, llame a APIs ni escriba en otros signals dentro de ella. Para los efectos secundarios, use effect().

Igualdad y omisión de actualizaciones

De forma predeterminada, computed utiliza igualdad referencial (Object.is) para decidir si el valor ha cambiado. Si el valor nuevo es igual al anterior, no se notifica a los consumidores, lo que evita trabajo innecesario.

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

Usar computed en plantillas

Lea los signals calculados en las plantillas como cualquier otro signal. Angular actualiza únicamente los enlaces cuyo valor calculado haya cambiado realmente.

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

computed frente a métodos

Use computed() para valores derivados del estado que deban actualizarse automáticamente y memorizarse. Use un método normal para cálculos puntuales que reciban argumentos o deban ejecutarse bajo demanda.

Comprobación rápida

Compruebe su comprensión de los signals calculados.

Resumen

Ha creado estado derivado con computed(): seguimiento automático de dependencias, funciones puras memoizadas, modelos de lectura encadenables y actualizaciones omitidas mediante igualdad. Exponga modelos de lectura calculados desde los stores para que las plantillas sean declarativas.

Preguntas frecuentes

¿La lección «Derivar el estado con computed» es gratis?

Sí — el texto completo de «Derivar el estado con computed» 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 «Derivar el estado con computed»?

Crear modelos de lectura a partir del estado base 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 2 de 4.

¿Cuánto tiempo toma la lección «Derivar el estado con computed»?

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