Svelte反应性在函数内部是如何工作的？ [英] How does Svelte reactivity work inside functions?

问题描述

我在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 } />

快速查看此问题的实际操作：https://svelte.dev/repl/73de7d705ab3442786710cd88ea3f625?version=3.12.1

推荐答案

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

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

我希望我能解释为什么这是可行的，但我不能...

这篇关于Svelte反应性在函数内部是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！