javascript / beginner
Snippet
Reactive Declarations with $:
In Svelte, you can create reactive variables using the $: syntax. These variables automatically re-calculate whenever any of the values they depend on change.
snippet.js
1
2
3
4
5
6
7
8
9
<script>let count = 0;$: doubled = count * 2;</script><button on:click={() => count++}>Count is {count}</button><p>Double is {doubled}</p>
svelte
Breakdown
1
let count = 0;
Initializes a standard variable that Svelte tracks for changes.
2
$: doubled = count * 2;
The $: mark tells Svelte to re-run this line whenever 'count' changes.