Angular Academy · Lezione

Signal calcolati

Derivi valori che si aggiornano automaticamente.

Signal calcolati è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Che cos'è un signal computed

Un signal computed() ricava un valore da uno o più altri signal. Ogni volta che un signal sorgente cambia, il valore calcolato viene ricalcolato in modo lazy — solo quando qualcosa lo legge.

I signal computed sono di sola lettura: non è possibile chiamare .set() su di essi.

Creare un computed

Si passa una funzione a computed(). Angular tiene automaticamente traccia di ogni signal letto al suo interno.

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

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

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

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

Rilevamento automatico delle dipendenze

Non è mai necessario dichiarare manualmente le dipendenze. La lettura di price() e quantity() all'interno del callback le registra automaticamente come dipendenze.

Se un signal viene letto in modo condizionale e il relativo ramo non viene raggiunto, non viene tracciato in quell'esecuzione.

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

Lazy evaluation e memoizzazione

Un computed viene eseguito solo quando viene letto e memorizza nella cache il risultato. Se lo legge due volte senza modificare le sorgenti, la funzione viene eseguita una sola volta.

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

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

Concatenare i signal computed

I signal computed possono dipendere da altri signal computed, formando un grafo reattivo.

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

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

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

Usare computed in un componente

I signal computed sono particolarmente efficaci nei componenti. Il template viene nuovamente renderizzato solo quando il valore calcolato cambia effettivamente.

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

I computed sono di sola lettura

Provare a impostare un signal computed genera un errore in fase di compilazione. I computed servono esclusivamente a esprimere uno stato derivato.

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

Uguaglianza e ricalcoli evitati

Per impostazione predefinita, un computed usa Object.is per il confronto. Se il nuovo valore calcolato è uguale a quello precedente, le dipendenze non ricevono notifiche, evitando lavoro inutile.

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

Funzione di uguaglianza personalizzata

È possibile passare un'opzione equal per controllare quando un computed viene considerato cambiato, utile per oggetti o array.

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

Evitare effetti collaterali nei computed

Un computed deve essere puro: niente chiamate HTTP, logging usato come comportamento o modifiche ad altri signal. Gli effetti collaterali appartengono a effect(). Mantenere puri i computed rende prevedibile il grafo reattivo.

Computed vs metodi

Un metodo del template viene eseguito a ogni ciclo di change detection. Un computed viene eseguito solo quando cambiano le sue dipendenze e memorizza il risultato nella cache: è molto più efficiente per i valori derivati.

// 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));

Verifica rapida

Verifichi la propria comprensione dei signal computed.

Riepilogo: signal computed

Ha imparato che computed() crea signal derivati di sola lettura con rilevamento automatico delle dipendenze, valutazione lazy e memoizzazione.

Li mantenga puri: niente effetti collaterali.
Possono dipendere da altri signal computed.
Usi equal per un rilevamento personalizzato dei cambiamenti.

Prossimo argomento: eseguire effetti collaterali con effect().

Domande Frequenti

La lezione «Signal calcolati» è gratuita?

Sì — il testo completo di «Signal calcolati» è 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 «Signal calcolati»?

Derivi valori che si aggiornano automaticamente. 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 1 di 4.

Quanto tempo richiede la lezione «Signal calcolati»?

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