javascript / expert
Snippet
Feinmaschige Reaktivität mit Svelte 5 Runes
Svelte 5 führt 'Runes' wie $state und $derived ein, um Reaktivität explizit zu handhaben. Im Gegensatz zur alten '$:'-Syntax bieten Runes vorhersehbare, feinmaschige Aktualisierungen und können innerhalb und außerhalb von .svelte-Dateien verwendet werden.
snippet.js
javascript
1
2
3
4
5
6
7
let count = $state(0);let doubled = $derived(count * 2);$effect(() => {console.log(`Current: ${count}, Doubled: ${doubled}`);return () => console.log('Cleaning up effect...');});
svelte
Erklärung
1
let count = $state(0);
Deklariert eine reaktive Statusvariable, initialisiert auf 0.
2
let doubled = $derived(count * 2);
Erstellt einen abgeleiteten Wert, der sich automatisch aktualisiert, wenn sich 'count' ändert.
3
$effect(() => { ... });
Führt Seiteneffekte aus, wenn sich die reaktiven Abhängigkeiten innerhalb des Blocks ändern.