如何在Svelte中使用反应式语句
在Svelte中，你可以监听组件状态的变化，并更新其他变量。
例如，如果你有一个count 变量。
<script>
let count = 0
</script>
而你通过点击一个按钮来更新它。
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>
你可以使用特殊的语法$: 来监听count 的变化，该语法定义了一个新的块，当该块中引用的任何变量发生变化时，Svelte将重新运行该块。
下面是一个例子。
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
$: console.log(`${count}`)
</script>
{count} <button on:click={incrementCount}>+1</button>
我使用了这个块。
$: console.log(`${count}`)
你可以写一个以上的块。
<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>
而且你也可以添加一个块来组合多个语句。
<script>
$: {
console.log(`the count is ${count}`)
console.log(`double the count is ${count * 2}`)
}
</script>
我在里面使用了console.log()的调用，但你也可以更新其他变量。
<script>
let count = 0
let double = 0
$: {
console.log(`the count is ${count}`)
double = count * 2
console.log(`double the count is ${double}`)
}
</script>
