分配给用作事件处理程序的变量不是反应式的：

Question

在以下代码中（为简洁起见，省略了onMount），count 和 handler 属性都用于 h1 元素。 handler 变量在 3 秒后更新；但它不会改变元素的行为。

在处理程序的定义需要动态更改的情况下，最好的方法是什么？

<script>
let count = 0;
let handler = () => {};

function update() {
    if (count >= 3) {handler = () => {count = 0;}}
    count++;
}
setInterval(update, 1000);
</script>

<h1 on:click={handler}>{count}</h1>

https://svelte.dev/repl/cb0469ba5d8241e382677ad95a659b76?version=3.12.1

Answer 1

哇，这很好，我希望您的代码能够正常工作！当有响应式更新时，看起来 Svelte 没有更新 on:click 绑定，这很奇怪！

作为一种变通方法，您可以为on:click 提供一个匿名函数，该函数调用动态更改的函数，如下所示：

<h1 on:click={() => handler()}>{count}</h1>

这似乎可以解决问题。这是updated REPL