Reactivity

Basic reactivity

<script>
  let count = 0
 
  function increment() {
    count += 1
  }
</script>
 
<main>
  <p>Count: {count}</p>
  <button on:click={increment}>Increment</button>
</main>

Label-syntax

Statements can be marked as reactive using the Label-Syntax from JavaScript: $: document.title = title;

The reason is, that the following doubleCountwouldn’t update in the browser:

<script>
  let count = 0
 
  let doubleCount = count * 2
  function increment() {
    count += 1
  }
</script>
 
<main>
  <p>Count: {doubleCount}</p>
  <button on:click={increment}>Increment</button>
</main>

Instead: $: doubleCount = count * 2