0 day streak
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
javascript
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.