当子反应语句更改时正在执行反应语句？

Question

我在 Svelte 中有两个响应式语句。当子语句发生变化时（基于某些输入），父语句（子语句所依赖的语句）也会被触发。检查以下代码段：

<script>
    const options = [
        {key: 'one'},
        {key: 'two'},
        {key: 'three'},
    ];

    // NOTE: initialOption may be obtained reactively from somewhere like the query string.
    $: initialOption = options[0];
    $: selectedOption = initialOption;

    $: console.log('initialOption reactivity:', initialOption);
    $: console.log('selectionOption reactivity:', selectedOption);
</script>

<select bind:value={selectedOption}>
    {#each options as opt}
    <option value={opt}>{opt.key}</option>
    {/each}
</select>

https://svelte.dev/repl/bdc48c75acf94a9ca13da377b7cd8f19?version=3.20.1

如果您运行上面的代码片段，每次您尝试从下拉菜单（绑定到 selectedOption）select 时，initialOption 赋值好像又被触发了，为什么？这是预期的行为吗？

Answer 1

问题有两个：

您正在将对象分配给您的反应变量
其中一个变量也绑定（在双向绑定中）到 select 元素的 value 属性

当您与 select 输入交互时，您会更新 selectedOption 的值，后者又会更新 initialOption（因为两个变量都是对同一对象的引用）。

您有两种方法可以解决这个问题：

在选项数组中使用标量而不是对象
绑定到常规变量而不是反应变量，而是使用反应代码来初始化变量

两种方法都得到了证明in this REPL

当子反应语句更改时正在执行反应语句？

Reactive statement being executed when child reactive statement changes?

svelte