Angular Academy · Lezione

Derivare lo stato con computed

Creare modelli di lettura dallo stato di base

Derivare lo stato con computed è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Stato derivato

Spesso lo stato viene calcolato a partire da altro stato: un totale dagli elementi, un elenco filtrato o un indicatore di validità. computed() di Angular crea un signal in sola lettura il cui valore deriva da altri signal.

Creazione di un computed

Passi una funzione a computed(). La funzione legge altri signal e restituisce un valore. Il risultato viene ricalcolato solo quando cambia una delle sue dipendenze.

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

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

Rilevamento automatico delle dipendenze

Non deve dichiarare alcuna dipendenza. Tutti i signal letti all'interno della funzione diventano automaticamente dipendenze. Se cambia qty, total viene ricalcolato; se cambia un signal non correlato, non succede nulla.

Memoizzazione

computed() memorizza nella cache il risultato. Leggerlo molte volte esegue la funzione una sola volta, finché non cambia una dipendenza. In questo modo i modelli di lettura derivati restano efficienti anche quando vengono usati in molti binding del template.

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

computed in uno store

All'interno di uno store di signal, esponga modelli di lettura computed, così i componenti consumano valori pronti per il rendering invece di ricalcolarli nei template.

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

Concatenare computed

I signal computed possono leggere altri signal computed. Costruisca modelli di lettura stratificati: una derivazione di base alimenta una derivazione di livello superiore.

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

Filtraggio e ricerca

Un modello di lettura comune consiste nel filtrare un elenco in base a un signal di ricerca. Il risultato filtrato si aggiorna ogni volta che cambia l'elenco o la query.

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

Nessun effetto collaterale

Una funzione computed() deve essere pura: legge solo signal e restituisce un valore. Non modifichi lo stato, non chiami API e non scriva su altri signal al suo interno. Per gli effetti collaterali usi invece effect().

Uguaglianza e aggiornamenti ignorati

Per impostazione predefinita, computed usa l'uguaglianza referenziale (Object.is) per stabilire se il valore è cambiato. Se il nuovo valore è uguale al precedente, i consumer non ricevono notifiche, evitando lavoro inutile.

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

Usare computed nei template

Legga i signal computed nei template come qualsiasi altro signal. Angular aggiorna solo i binding il cui valore computed è effettivamente cambiato.

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

computed rispetto ai metodi

Usi computed() per i valori derivati dallo stato che devono aggiornarsi automaticamente e sfruttare la memoizzazione. Usi un metodo normale per calcoli occasionali che accettano argomenti o devono essere eseguiti su richiesta.

Verifica rapida

Verifichi la Sua comprensione dei signal computed.

Riepilogo

Ha creato uno stato derivato con computed(): rilevamento automatico delle dipendenze, funzioni pure memoizzate, modelli di lettura concatenabili e aggiornamenti ignorati grazie all'uguaglianza. Esponga i modelli di lettura computed dagli store, così i template rimangono dichiarativi.

Domande Frequenti

La lezione «Derivare lo stato con computed» è gratuita?

Sì — il testo completo di «Derivare lo stato con computed» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Derivare lo stato con computed»?

Creare modelli di lettura dallo stato di base Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Derivare lo stato con computed»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy