Svelte 中输入框突然不可编辑，往往并非事件绑定或 DOM 属性问题，而是因响应式变量间隐式耦合引发的更新冲突——尤其当两个并行数组（如 keys 与 values）通过索引强关联时，任意一方的重赋值都可能破坏 #each 循环中 bind:value 的响应式上下文，导致输入失效。
svelte 中输入框突然不可编辑，往往并非事件绑定或 dom 属性问题，而是因响应式变量间隐式耦合引发的更新冲突——尤其当两个并行数组（如 keys 与 values）通过索引强关联时，任意一方的重赋值都可能破坏 `#each` 循环中 `bind:value` 的响应式上下文，导致输入失效。
在你提供的代码中，file_prefs_keys 和 file_prefs_values 被设计为两个独立但索引严格对齐的数组：
let file_prefs_keys = all().filter(k => k.startsWith("extension-"));
$: file_prefs_values = file_prefs_keys.map(k => localStorage.getItem(k));
这种“双数组映射”模式看似直观，实则埋下严重隐患：
✅ file_prefs_values 是派生响应式变量（依赖 file_prefs_keys）；
❌ 但 #each file_prefs_values as pref 中的 bind:value={pref} 绑定的是数组元素的原始值（字符串），而非响应式引用；
⚠️ 当你执行 file_prefs_keys = [...file_prefs_keys, ...] 或 file_prefs_keys.push(...) 后，Svelte 会重新计算 file_prefs_values —— 此时整个 file_prefs_values 数组被替换，#each 循环中所有 实例被销毁重建，而新生成的 pref 是只读字符串字面量，不再具备可绑定的响应式身份，因此输入框“看起来能聚焦、能选中文本，却无法修改”。
✅ 正确解法：用单一响应式对象数组替代平行数组
正如答案所指出，应将键值对封装为统一对象结构，每个对象自身承载完整状态：
<script>
const all = () =>
Array.from({ length: localStorage.length }, (_, i) => localStorage.key(i));
// ✅ 单一数据源：每个 preference 是 { key, value } 对象
let preferences = all()
.filter(k => k.startsWith('extension-'))
.map(key => ({
key,
value: localStorage.getItem(key) || ''
}));
// ✅ 响应式持久化：每次 preferences 变化时批量写入
$: preferences.forEach(p => localStorage.setItem(p.key, p.value));
async function newPref() {
const ext = prompt('Enter the file extension to add');
if (!ext) return;
// ✅ 直接追加新对象，Svelte 自动触发 #each 更新
preferences = [...preferences, {
key: 'extension-' + ext,
value: ''
}];
}
</script><section><div>
{#each preferences as { key }}
<label for="input-{key}">{key}</label>
<br>
{/each}
</div>
<div>
{#each preferences as { key, value }}
<!-- ✅ bind:value 绑定到对象属性，天然响应式 -->
<input id="input-{key}" bind:value><br>
{/each}
</div>
</section><button on:click="{newPref}">+</button>
? 关键原理说明
| 问题模式 | 风险点 | 解决方案优势 |
|---|---|---|
| file_prefs_keys + file_prefs_values 平行数组 | 索引错位、数组重赋值导致 bind:value={pref} 绑定丢失（pref 是临时字符串） | preferences 是对象数组，bind:value 直接作用于可变属性 p.value，Svelte 能精确追踪属性级变更 |
| forEach 写入 localStorage（无条件全量） | 性能冗余，但逻辑简洁安全 | 如需优化，可抽离为子组件 ，实现单条 key/value 的局部持久化 |
| 缺少 | 可访问性缺陷（屏幕阅读器无法识别输入用途） | 使用 for="input-{key}" 与 id="input-{key}" 显式关联，符合 WCAG 标准 |
⚠️ 补充注意事项
- 避免手动触发 $: 副作用：原代码中 $: file_prefs_keys.forEach(...) 是危险写法——它在每次 file_prefs_keys 变化时强制执行副作用，但若该副作用又间接触发其他响应式更新（如修改 file_prefs_values），极易引发无限循环或竞态。
- 不要用 $set 或 push() 混合响应式更新：file_prefs_keys.push(...) 不触发响应式更新，而 file_prefs_keys = [...file_prefs_keys, ...] 又会破坏 #each 上下文。统一使用不可变赋值 + 对象结构是 Svelte 最佳实践。
- 初始化必须保障响应式完整性：确保 preferences 在组件加载时已包含完整初始数据（含默认空值），避免后续 bind:value 绑定到 undefined。
通过将数据建模从「二维数组」升级为「一维对象数组」，你不仅解决了输入框冻结问题，更获得了可维护性、可访问性与响应式稳定性的三重提升——这正是 Svelte “让状态驱动 UI，而非 UI 驱动状态” 设计哲学的典型体现。
