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

Déclarations réactives dans Svelte

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

Plus de tutoriels sveltes: