在 Svelte 中使用反應式語句
如何在 Svelte 中使用反應式語句
在 Svelte 中，您可以監聽組件狀態的變化並更新其他變數。
舉個例子，如果您有一個 count 變數：
1
2
3
| <script>
let count = 0
</script>
|
並且您通過點擊一個按鈕來更新它：
1
2
3
4
5
6
7
8
9
| <script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>
|
您可以使用特殊的 $: 語法來監聽 count 的變化，該語法定義了一個新區塊，在任何被引用的變數發生更改時 Svelte 將重新運行該區塊。
以下是一個例子：
1
2
3
4
5
6
7
8
9
10
11
| <script>
let count = 0
const incrementCount = () => {
count = count + 1
}
$: console.log(`${count}`)
</script>
{count} <button on:click={incrementCount}>+1</button>
|
我使用了以下區塊：
1
| $: console.log(`${count}`)
|
您可以寫多個這樣的區塊：
1
2
3
4
| <script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>
|
您還可以添加一個區塊來分組多個語句：
1
2
3
4
5
6
| <script>
$: {
console.log(`the count is ${count}`)
console.log(`double the count is ${count * 2}`)
}
</script>
|
我在其中使用了一個 console.log() 調用，但您還可以更新其他變數：
1
2
3
4
5
6
7
8
9
10
| <script>
let count = 0
let double = 0
$: {
console.log(`the count is ${count}`)
double = count * 2
console.log(`double the count is ${double}`)
}
</script>
|
tags: [“Svelte”, “reactive statements”, “component state”, “syntax”, “console.log”]