Signals unter der Haube

const a = signal(1);                                  // Producer
const b = signal(2);                                  // Producer
const sum = computed(() => a() + b());                // Consumer UND Producer
const product = computed(() => a() * b());
const result = computed(() => sum() + product());     // Diamant: a und b kommen hier auf zwei Wegen an

// Während eine reaktive Funktion läuft, merkt sich Angular einen „aktiven Consumer“.
// Jedes Signal, das in diesem Moment gelesen wird, wird zu seiner Abhängigkeit. Du deklarierst nichts: Der Graph entsteht aus Lesezugriffen.

a.set(5)
  │  PUSH: a erhöht seine `version` und meldet den „Live“-Consumern (Template, Effect), dass sie dirty SEIN KÖNNTEN.
  │        Noch wird nichts neu berechnet.
  ▼
Template / Effect als dirty markiert  →  Change Detection plant ein Rendering
  │
  ▼
Template liest result()
  │  PULL: result prüft seine Producer (sum, product) — haben sie eine andere Version?
  │        sum prüft seine Producer (a, b) — a hat eine andere Version → sum wird neu berechnet.
  │        Ist der neue Wert GLEICH dem alten, steigt die Version von sum nicht → die Propagation stoppt.
  ▼
result wird einmal neu berechnet, mit bereits konsistenten Werten (glitch-free)

const expensive = computed(() => {
  console.log('berechne…');
  return items().filter(matches).sort(byPrice);
});

items.set(newItems);  // nichts wird ausgegeben: noch hat niemand gelesen
expensive();          // „berechne…“ — erster Lesezugriff
expensive();          // nichts: memoisierter Wert
items.set(other);     // weiterhin nichts — als veraltet markiert, nicht neu berechnet
expensive();          // „berechne…“

// Standardmäßig: Object.is. Bei Objekten/Arrays zählt die REFERENZ.
const tags = signal(['a', 'b']);
tags.set(['a', 'b']);           // andere Referenz → „neuer“ Wert → Consumer werden neu berechnet

// Eigene Gleichheit: Der Wert ändert sich nicht, wenn er nach deiner Regel „derselbe“ ist
const sameItems = (x: string[], y: string[]) => x.length === y.length && x.every((v, i) => v === y[i]);
const stableTags = signal(['a', 'b'], { equal: sameItems });
stableTags.set(['a', 'b']);     // gleich → Version steigt nicht → nichts passiert downstream

// Auch ein computed hat eine Gleichheit: Ist sein Ergebnis gleich, stoppt die Propagation dort
const parity = computed(() => (n() % 2 ? 'ungerade' : 'gerade'));   // n: 0 → 2 → 4 … parity bleibt 'gerade'

const view = computed(() => {
  if (showDetails()) {
    return details();     // Abhängigkeiten: showDetails + details
  }
  return summary();       // Abhängigkeiten: showDetails + summary
});
// Bei jedem Durchlauf wird die Liste der Producer aus dem aufgebaut, was TATSÄCHLICH gelesen wurde.
// Solange showDetails() false ist, berechnet eine Änderung von details view nicht neu.

// View-Effect: im Kontext einer Komponente erstellt → läuft VOR der Prüfung dieser Komponente
// durch die Change Detection; er wird zusammen mit der Komponente zerstört.
@Component({ /* ... */ })
export class Profile {
  constructor() {
    effect(() => console.log('profil', this.user()));
  }
}

// Root-Effect: in einem Root-Service erstellt → läuft vor der Prüfung aller Komponenten;
// er lebt so lange wie die Anwendung.
@Injectable({ providedIn: 'root' })
export class Analytics {
  constructor() {
    effect(() => track(this.route()));
  }
}
// Beide sind asynchron (sie laufen nicht im Moment von set()) und an die Change Detection gekoppelt.

@Component({
  template: `<p>{{ fullName() }}</p>`,   // das Template ist ein reaktiver Consumer
})
export class Card {
  readonly first = signal('Ana');
  readonly fullName = computed(() => `${this.first()} Pop`);
}
// first.set('Ioana') → der reaktive Knoten des Templates wird als dirty markiert → die Komponente wird
// zur Prüfung markiert (wie bei markForCheck) → die Change Detection rendert sie neu. Kein Zone.js,
// keine Prüfung des ganzen Baums: So funktionieren zoneless-Anwendungen.

// ✗ Schreiben innerhalb eines computed — Fehler: "Writing to signals is not allowed in a `computed`"
const total = computed(() => {
  count.set(items().length);       // Seiteneffekt in einer Ableitung
  return items().reduce(sum, 0);
});

// ✗ Effect für eine Ableitung missbraucht (ein zusätzliches Rendering, Risiko von Schleifen)
effect(() => total.set(items().reduce(sum, 0)));

// ✓ Die Ableitung ist ein computed
const total2 = computed(() => items().reduce(sum, 0));

// ✗ Mutation: gleiche Referenz → Object.is sagt „gleich“ → nichts wird aktualisiert
items().push(newItem);
// ✓
items.update((list) => [...list, newItem]);

KNOTEN        ROLLE                   WANN ER LÄUFT
signal        Producer                — (ändert bei set/update nur Wert und Version)
computed      Consumer + Producer     lazy: beim Lesen, nur wenn sich eine Abhängigkeit geändert hat
effect        „Live“-Consumer         asynchron, während der Change Detection (View: vor der Komponente; Root: vor allen)
template      „Live“-Consumer         wenn die Komponente nach der dirty-Markierung neu gerendert wird

REGELN
  Abhängigkeiten = was du beim letzten Durchlauf TATSÄCHLICH gelesen hast (dynamisch, pro Zweig)
  Standardgleichheit Object.is; { equal } für „gleiche“ Werte → stoppt die Propagation
  ein computed ohne Leser wird gar nicht berechnet
  schreibe keine Signals in einem computed; leite Zustand nicht mit einem effect ab
  untracked(() => …) liest, ohne eine Abhängigkeit zu erzeugen