如何在Svelte中响应式遍历对象并实现DOM同步更新？

这个问题我做项目时也踩过类似的坑，你的怀疑方向完全正确——虽然整个obj是通过$state声明的响应式对象，但在each循环里直接引用解构出来的value.checked时，Svelte的响应式追踪系统没能正确关联到嵌套属性的变化，导致DOM没有同步更新。给你几个实用的解决办法：

方法1：直接引用原对象的嵌套属性（最简单高效） #

把模板里的{value.checked}改成{obj[key].checked}，让Svelte直接追踪obj的嵌套属性变化，这样修改checked值时DOM会立刻同步：

{#each Object.entries(obj) as [key, value]}
    <div class="mb-8">
        {key}: {obj[key].checked}
        <ion-toggle onchange={e => obj[key].checked = e.target.checked}></ion-toggle>
    </div>
{/each}

为什么这个有用？原来的{value.checked}是引用each循环块里的局部变量value，Svelte在这个场景下没自动把它和obj的子属性绑定起来；换成直接访问obj[key].checked后，响应式系统能明确感知到这个属性的变化，自然会触发DOM更新。

方法2：更新时触发父对象的引用变化 #

如果你不想修改模板的显示逻辑，可以在更新checked时，通过展开运算符创建新的对象，让obj的引用发生变化，强制Svelte重新渲染each循环：

{#each Object.entries(obj) as [key, value]}
    <div class="mb-8">
        {key}: {value.checked}
        <ion-toggle onchange={e => {
            // 重新创建对象，触发响应式更新
            obj = {
                ...obj,
                [key]: {...obj[key], checked: e.target.checked}
            };
        }}></ion-toggle>
    </div>
{/each}

不过这个方法会创建新的对象副本，对于复杂大对象可能有轻微的性能开销，适合小对象场景应急用。

方法3：用响应式类配合Map（更规范的嵌套响应式方案） #

你尝试过的SvelteMap思路是对的，只要把每个子项的属性也声明为响应式就行。比如先定义带$state属性的类：

class ToggleItem {
    checked = $state(false);
}

// 用$state包裹Map，让整个集合也具备响应式
const obj = $state(new Map([
    ['one', new ToggleItem()],
    ['two', new ToggleItem()],
    ['three', new ToggleItem()]
]));

然后模板里直接遍历Map的条目，修改value.checked时会自动触发DOM更新：

{#each obj.entries() as [key, value]}
    <div class="mb-8">
        {key}: {value.checked}
        <ion-toggle onchange={e => value.checked = e.target.checked}></ion-toggle>
    </div>
{/each}

这种方式把每个子项的响应式独立出来，逻辑更清晰，适合复杂业务场景。

额外小提示：试试Ionic组件的官方绑定方式 #

你提到用ion-toggle，其实官方提供了更简洁的bind:checked绑定方式，省去手动写onchange的麻烦，而且响应式更可靠，你可以在项目里试试：

<ion-toggle bind:checked={obj[key].checked}></ion-toggle>

这种方式在大部分Ionic + Svelte的场景下都能正常工作，比手动处理onchange更省心。

备注：内容来源于stack exchange，提问作者Jacob Runge