Svelte中bind:value搭配#each导致响应式语句异常执行问题

原因解释 #

在Svelte的响应式追踪机制中，当你将bind:value与基于data.merchants的#each循环结合使用时，选择选项触发providerIds更新的过程中，Svelte的绑定内部逻辑会隐式重新访问data.merchants来同步选项状态。这个隐式访问会被响应式系统判定为对data的依赖读取，进而触发所有依赖data的响应式块——哪怕此时data本身并没有发生任何变化。

你的场景中，option的value使用了数组索引i，这会加剧这个问题：绑定更新时，Svelte需要通过索引关联到data.merchants中的对应项，进一步强化了对data的依赖追踪误判。

修复方法 #

方法一：避免使用索引作为option的value #

将option的value改为merchant.id（而非数组索引），让绑定的providerIds存储商户ID而非索引。这样绑定更新时无需访问data.merchants的索引，消除隐式的data依赖读取：

<select multiple name="filter" bind:value={providerIds}>
    {#each data.merchants as merchant (merchant.id)}
        <option value={merchant.id}>{merchant.name}</option>
    {/each}
</select>

方法二：在响应式块中增加真实变化校验 #

添加一个变量记录上一次的data引用，仅当data真正发生变化时才执行逻辑，过滤掉误触发的情况：

export let data
let prevData = data

$: {
    if (data !== prevData) {
        console.log('PageData changed', data)
        parseOptions(data)
        resetOptions()
        prevData = data
    }
}

方法三：精确解构依赖属性 #

如果响应式逻辑仅依赖data中的部分属性（比如merchants），可以单独解构这些属性，让响应式块仅追踪具体属性的变化，而非整个data对象：

export let data
$: merchants = data.merchants

$: {
    console.log('Merchants changed', merchants)
    parseOptions({ ...data, merchants }) // 按需传递数据
    resetOptions()
}

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