为何<select>的bind:value会意外触发另一个变量的幂等更新？

你看到的现象并不是selectedNumber被“更新”了，而是Svelte响应式声明的运行机制导致的：

• Svelte的$:响应式块有两个触发时机：
  1. 当块内引用的响应式变量发生变化时，会自动运行；
  2. 每当组件需要进行DOM更新（比如这里selectedMultiple变化触发的更新），所有响应式块都会在更新前先执行一次。

当你选择第二个Select时，selectedMultiple的值改变，触发组件DOM更新。此时所有响应式声明都会提前执行，包括那个打印selectedNumber的日志块，但实际上selectedNumber的引用和属性都没有任何变化——只是响应式块被执行了而已。

验证方式 #

你可以给selectedNumber的响应式块添加旧值对比，就能区分“真正的变化”和“组件更新带来的执行”：

<script>
  let numbers = [
    {name: 'one', multiples: [1,2,3]},
    {name:'two', multiples: [2,4,6]},
    {name: 'three', multiples: [3,6,9]}
  ];
  let selectedNumber;
  let selectedMultiple;
  let prevSelectedNumber;

  $: {
    if (prevSelectedNumber !== selectedNumber) {
      console.log("selectedNumber 真正变化了: ", selectedNumber?.name);
      prevSelectedNumber = selectedNumber;
    }
  }
  $: console.log("selectedMultiple changed: ", selectedMultiple);
</script>

此时只有切换第一个Select时，才会打印“真正变化了”的日志，选第二个Select时不会触发。

额外优化建议 #

你的第二个Select的option没有显式绑定value，会导致selectedMultiple被设置为字符串类型（比如选中3时，selectedMultiple的值是"3"而非数字3），建议补充绑定保持类型一致：

{#each selectedNumber.multiples as multiple}
  <option value={multiple}>{multiple}</option>
{/each}

内容的提问来源于stack exchange，提问作者Ryan Tarpine