Tiefe Reaktivität

Reaktivität geht bis in die Tiefe

$state ist nicht auf einzelne Werte beschränkt. Steckst du ein Objekt oder Array hinein, wird es tief reaktiv: Auch Änderungen an verschachtelten Eigenschaften und Array-Methoden wie push oder sort werden erkannt und aktualisieren die Oberfläche.

let aufgabe = $state({
  titel: 'Svelte lernen',
  tags: ['frontend'],
  details: { prioritaet: 'hoch' }
});

// Alle drei sind reaktiv — auch tief verschachtelt:
aufgabe.titel = 'Runes meistern';
aufgabe.tags.push('reaktivität');
aufgabe.details.prioritaet = 'mittel';

Du musst nichts unveränderlich behandeln, keine Kopie erzeugen, keinen Setter aufrufen — du mutierst ganz normal, und Svelte folgt.

Wie funktioniert das? Proxies

Unter der Haube verpackt Svelte deine Objekte und Arrays in einen Proxy. Ein Proxy fängt jeden Zugriff ab: Beim Lesen merkt sich Svelte, welcher Effekt oder abgeleitete Wert davon abhängt; beim Schreiben löst es gezielt die betroffenen Updates aus. Deshalb funktionieren auch tiefe Mutationen ohne dein Zutun.

let liste = $state([1, 2, 3]);

// Svelte verpackt Objekte/Arrays in einen Proxy und fängt
// JEDEN Zugriff ab — Lesen registriert Abhängigkeiten,
// Schreiben löst Updates aus. Deshalb funktioniert das:
liste.push(4);      // ✅
liste[0] = 99;      // ✅
liste.sort();       // ✅

$state.raw — bewusst nicht tief

Die Proxy-Verpackung hat einen kleinen Preis. Bei sehr großen Datenstrukturen, die du ohnehin nur komplett ersetzt (statt zu mutieren), lohnt sich $state.raw. Der Wert bleibt reaktiv, aber innere Mutationen werden nicht verfolgt — Änderungen wirken nur, wenn du den Wert komplett neu zuweist.

// $state.raw: NICHT tief. Der Wert ist reaktiv, aber
// Mutationen im Inneren werden NICHT verfolgt.
let punkte = $state.raw({ x: 0, y: 0 });

punkte.x = 10;               // ❌ löst KEIN Update aus
punkte = { x: 10, y: 0 };    // ✅ Ersetzen statt Mutieren

// Nützlich für große, unveränderliche Datenmengen —
// spart den Overhead der Proxy-Verpackung.

$state.snapshot — ein statischer Klon

Weil ein $state-Objekt ein Proxy ist, verhält es sich in ein paar Situationen unerwartet: Ein console.log zeigt den Proxy statt der Daten, und externe APIs, die structuredClone verwenden (z. B. beim Versenden über Web-Worker oder fetch), können mit einem Proxy nicht umgehen. $state.snapshot() gibt dir einen echten, entkoppelten Klon ohne Proxy zurück.

let aufgabe = $state({ tags: ['a', 'b'] });

// Ein $state-Objekt ist ein Proxy. Loggt man es direkt,
// sieht man im Devtools-Log den Proxy, nicht die Daten.
console.log(aufgabe);                    // Proxy(Object) …

// $state.snapshot() gibt einen statischen, entkoppelten Klon:
console.log($state.snapshot(aufgabe));   // { tags: ['a', 'b'] }

// Pflicht, bevor du State an externe APIs / structuredClone /
// fetch-Bodies übergibst, die keinen Proxy erwarten.
await fetch('/api', {
  method: 'POST',
  body: JSON.stringify($state.snapshot(aufgabe))
});

Rails-Vergleich

Das Verfolgen von Änderungen an einem Objekt kennst du aus ActiveRecord: Dirty Tracking und nested_attributes.

class Task < ApplicationRecord
  has_many :tags
  accepts_nested_attributes_for :tags
end

task = Task.find(1)
task.title = 'neu'
task.title_changed?   # => true  (Dirty Tracking)
task.changes          # => { "title" => ["alt", "neu"] }

# ActiveRecord verfolgt Änderungen an Attributen und
# verschachtelten Records. Svelte-Proxies machen dasselbe
# im Browser — nur dass jede Mutation sofort die UI aktualisiert,
# nicht erst beim save.

Zusammenfassung