Svelte如何实现两个变量的双向响应绑定？

方案一：响应式声明+开关变量（优先推荐） #

通过引入开关变量标记当前更新的变量，阻断响应式循环触发，完美适配Svelte的$:响应式语法：

<script>
  let a = 1;
  let b = 2;
  let isUpdating = null;

  // 当a变化且非b触发的更新时，同步更新b
  $: if (isUpdating !== 'b') {
    isUpdating = 'a';
    b = 2 * a;
    isUpdating = null;
  }

  // 当b变化且非a触发的更新时，同步更新a
  $: if (isUpdating !== 'a') {
    isUpdating = 'b';
    a = b / 2;
    isUpdating = null;
  }
</script>

<input type="number" bind:value={a} />
<input type="number" bind:value={b} />

<p>a: {a}, b: {b}</p>

核心逻辑：开关变量isUpdating会在其中一个变量更新时标记来源，另一个变量的响应式块会根据这个标记跳过执行，彻底避免循环依赖。

方案二：手动监听输入事件 #

通过on:input事件直接处理输入更新，手动同步另一个变量，从根源上避开响应式循环：

<script>
  let a = 1;
  let b = 2;

  function updateFromA(e) {
    a = Number(e.target.value);
    b = 2 * a;
  }

  function updateFromB(e) {
    b = Number(e.target.value);
    a = b / 2;
  }
</script>

<input type="number" value={a} on:input={updateFromA} />
<input type="number" value={b} on:input={updateFromB} />

<p>a: {a}, b: {b}</p>

核心逻辑：不再依赖Svelte的自动响应式追踪，而是通过事件触发手动更新流程，完全可控且不会出现循环问题。

内容的提问来源于stack exchange，提问作者Ólavur Nón