Déclarations réactives dans Svelte

Comment travailler avec des déclarations réactives dans Svelte

Dans Svelte, vous pouvez écouter les modifications de l'état des composants et mettre à jour d'autres variables.

Par exemple, si vous avez uncountvariable:

<script>
let count = 0
</script>

et vous le mettez à jour en cliquant sur un bouton:

<script>
let count = 0

const incrementCount = () => { count = count + 1 } </script>

{count} <button on:click={incrementCount}>+1</button>

Vous pouvez écouter les changements surcounten utilisant la syntaxe spéciale$:qui définit un nouveau bloc que Svelte réexécutera lorsqu'une variable référencée dans celui-ci change.

Voici un exemple:

<script>
let count = 0

const incrementCount = () => { count = count + 1 }

$: console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) </script>

{count} <button on:click={incrementCount}>+1</button>

J'ai utilisé le bloc:

$: console.log(`${count}`)

Vous pouvez en écrire plusieurs:

<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>

Et vous pouvez également ajouter un bloc pour regrouper plusieurs instructions:

<script>
$: {
  console.log(`the count is ${count}`)
  console.log(`double the count is ${count * 2}`)
}
</script>

J'ai utilisé un appel console.log () là-dedans, mais vous pouvez également mettre à jour d'autres variables:

<script>
let count = 0
let double = 0

$: { console.log(the count is </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) double = count * 2 console.log(double the count is </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) } </script>

Téléchargez mon gratuitManuel de Svelte


Plus de tutoriels sveltes: