Câu lệnh phản ứng trong Svelte

Cách làm việc với Câu lệnh phản ứng trong Svelte

Trong Svelte, bạn có thể lắng nghe các thay đổi trong trạng thái thành phần và cập nhật các biến khác.

Ví dụ, nếu bạn có mộtcountBiến đổi:

<script>
let count = 0
</script>

và bạn cập nhật nó bằng cách nhấp vào một nút:

<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>

Bạn có thể lắng nghe các thay đổi trêncountsử dụng cú pháp đặc biệt$:xác định một khối mới mà Svelte sẽ chạy lại khi bất kỳ biến nào được tham chiếu vào nó thay đổi.

Đây là một ví dụ:

<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>

Tôi đã sử dụng khối:

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

Bạn có thể viết nhiều hơn một trong số chúng:

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

Và bạn cũng có thể thêm một khối để nhóm nhiều hơn một câu lệnh:

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

Tôi đã sử dụng lệnh gọi console.log () trong đó, nhưng bạn cũng có thể cập nhật các biến khác:

<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ải xuống miễn phí của tôiSổ tay Svelte

Câu lệnh phản ứng trong Svelte

Cách làm việc với Câu lệnh phản ứng trong Svelte

Các hướng dẫn nhỏ gọn hơn: