在 Svelte 中使用反應式語句

如何在 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>