Svelte为何错误标记未修改的$places变量导致输入框只读？

算力阿峰

2026-8-30

问题产生原因

这是Svelte 3/4 静态响应式分析的已知缺陷：框架不会在运行时判断变量的实际引用关系，所有依赖追踪都在编译阶段通过代码扫描完成。
你写的响应式语句$: inputs = [...$places, '']，在编译器扫描时只会识别到inputs依赖$places，但识别不到展开运算符是在生成一个和$places完全无关的新数组，反而会判定inputs是$places的视图映射。
后续在{#each}块中使用bind:value={input}做双向绑定时，编译器会默认对数组元素的修改需要同步到所有上游依赖的源数据，因此自动在输入事件的处理函数中加了$$invalidate(1, $places)的逻辑，把$places也标记为已变更。
只要$places被标记失效，对应的响应式语句就会重新执行，把inputs重置为初始的[...$places, '']，直接覆盖用户刚输入的内容，最终表现为输入框无法正常输入，类似只读状态。

可行解决方案

任选一种即可修复问题：

方案1：切断静态分析的关联链路
把数组拷贝逻辑放到独立函数中执行，Svelte的编译阶段不会跨函数追踪数组内部元素的引用关系，就不会再把inputs和$places错误绑定：
```
// 把拷贝逻辑抽成独立函数
const createInputs = (placesList) => placesList.slice().concat('')
$: inputs = createInputs($places)
```
原有模板的双向绑定代码不需要做任何修改即可正常工作。

方案2：手动实现输入更新逻辑
放弃bind:value的自动双向绑定语法，手动绑定输入值和事件，完全绕开编译器自动生成的依赖标记逻辑：

<label for="place0">Places</label>
{#each inputs as _, idx}
  <input
    id="place{idx}"
    name="places"
    type="text"
    value={inputs[idx]}
    on:input={(e) => {
      inputs[idx] = e.currentTarget.value
      inputs = [...inputs] // 手动触发inputs的响应式更新
    }}
  />
{/each}