javascript / intermediate
Snippet
Reaktive Deklarationen für abgeleiteten Zustand
Reaktive Deklarationen in Svelte verwenden das '$:' Label, um Code automatisch neu auszuführen, wenn sich seine Abhängigkeiten ändern. Dies ist der idiomatische Weg, um abgeleiteten Zustand oder reaktive Seiteneffekte innerhalb einer Komponente ohne manuelle Event-Listener zu handhaben.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
<script>let count = 1;$: doubled = count * 2;$: if (doubled > 10) {console.log('Threshold exceeded!');}</script><button on:click={() => count++}>Increment: {count}</button><p>Doubled: {doubled}</p>
svelte
Erklärung
1
$: doubled = count * 2;
Deklariert eine reaktive Variable, die sich aktualisiert, sobald sich 'count' ändert.
2
$: if (doubled > 10) { ... }
Ein reaktiver Block, der als Seiteneffekt ausgeführt wird, wenn 'doubled' die Bedingung erfüllt.