Why are Reactivity Declarations not active by default?

[mmailaender]

I'm new to svelte and doing the tutorial. I like the way that svelte has native reactivity.

But I wonder why I need to opt-in for reactive declarations with $:.

let count = 0;
$: doubled = count * 2;

https://svelte.dev/tutorial/reactive-declarations

For me, it would feel more consistent and easier to adopt if also the reactive declarations would be native active, and I have to opt out:

<script>
	let count = 0;
	let doubled = count * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

Could someone please explain to me why this decision was made? Am I missing something?

[eakl]

count is updated by (re)assignment (which is the basic form of reactivity) so the DOM will update when count is (re)assigned. doubled is not reassigned so the DOM won't know it has change.

Either you reassign doubled inside handleClick or you put some sort of --watch flag on count so that every time it changes, it triggers a reassignment of doubled. $ is a shorthand for "please reassign doubled when any variable inside the reactive statement has changed"