Svelte反应性如何在函数内部工作？

Question

我在Svelte的反应性方面遇到一些严重问题。我已经隔离了我认为至少是我的主要问题之一。将变量绑定到复选框时，将变量设置在函数内部而不是外部时，反应似乎中断。这是预期的行为吗？在那种情况下为什么呢？预期的工作流程是什么？

示例代码，一个Svelte组件：

<script>
    let foo = true;

    // This assignment works both on the plain text view (Foo: true/false)
    // and on the checkbox
    // setInterval(() => foo = !foo, 500)

    // This assignment works only on the plain text view (Foo: true/false)
    // but not for the checkbox
    function action() {
        foo = !foo;
    }
</script>

Foo: { foo }<br />
Checkbox: <input type="checkbox" bind:checked={ foo } on:click|preventDefault={ action } />

Svelte REPL可以看到此问题在起作用：https ://svelte.dev/repl/73de7d705ab3442786710cd88ea3f625?version =3.12.1

Answer 1

如果您将变量声明包装在setTimeout没有任何时间限制的 a 中（使其默认为 0，因此尽快运行），您的代码将起作用。

function action() {
    setTimeout(() => {
        foo = !foo;
    });
}

我希望我能解释为什么这有效，但我不能......