Svelte 5嵌套对象绑定失效：从Svelte4迁移后的疑问

从Svelte4迁移到Svelte5后，直接绑定store的嵌套对象会出现绑定失效的情况，但通过外层组件绑定整个store对象却能正常工作。以下是你的代码场景：

父组件代码

<script>
import { writable } from "svelte/store"
import Toggle from "./Toggle.svelte"
import OuterToggle from "./OuterToggle.svelte"

let condition = $state({name: "app"});

let store = writable({data: {enabled : true}})
</script>
<br>
绑定失效
{JSON.stringify($store)}- {$store.data.enabled}
<Toggle bind:data={$store.data}></Toggle><br> <!-- 在Svelte4中可用 -->
<br>
绑定生效 <OuterToggle bind:data={$store}></OuterToggle>

Toggle组件代码

<script>
let {data = $bindable({enabled:true})} = $props()
function change(e) {
    data.enabled = e.target.checked
}
</script>
<input type="checkbox" checked={data.enabled} onchange={change}>

OuterToggle组件代码

<script>
import Toggle from "./Toggle.svelte"
let {data = $bindable({data :{enabled:true}})} = $props()
</script>
{JSON.stringify(data)}
<Toggle bind:data={data.data}></Toggle>

为什么直接绑定嵌套对象会失效？ #

Svelte5的响应式机制和store交互时，有两个核心限制：

1. store的订阅逻辑：store仅在顶层对象被替换时触发订阅更新，不会自动跟踪嵌套属性的修改。当你绑定$store.data给子组件时，子组件修改data.enabled只是改变了对象内部属性，但没有替换$store的顶层对象，因此store不会发出更新通知，父组件的$store订阅也不会触发重新渲染，页面数值无法同步。
2. $bindable的工作限制：$bindable声明的props需要绑定一个可被重新赋值的引用。但$store.data是store的嵌套属性，你无法直接给$store.data重新赋值（除非替换整个$store对象），导致子组件的修改无法反向同步到store的顶层，绑定链路断裂。

为什么外层组件绑定整个对象能生效？ #

当你用OuterToggle bind:data={$store}时，绑定的是store的顶层对象：

• OuterToggle中的data指向store的完整value对象，子组件Toggle修改data.data.enabled时，OuterToggle中的data对象属性发生变化。
• 由于bind:data={$store}是双向绑定整个store对象，Svelte会自动检测到data对象的属性变化，并将修改后的对象写回store（相当于调用store.set(data)），触发store的订阅更新，父组件就能同步到最新数值。

解决方案 #

1. 显式更新store顶层对象
   修改Toggle组件，通过回调通知父组件更新store：

   <!-- Toggle.svelte -->
   <script>
   let { data, onUpdate } = $props();
   function change(e) {
       const newData = { ...data, enabled: e.target.checked };
       onUpdate(newData);
   }
   </script>
   <input type="checkbox" checked={data.enabled} onchange={change}>
   

   父组件中使用：

   <Toggle data={$store.data} onUpdate={(newData) => store.set({ ...$store, data: newData })} />
   

2. 用$state替代store管理嵌套对象
   如果不需要store的跨组件订阅能力，直接用$state可自动跟踪嵌套属性变化：

   <script>
   let store = $state({ data: { enabled: true } });
   </script>
   <Toggle bind:data={store.data} />
   

3. 保留外层组件的绑定方式
   继续使用OuterToggle这类外层组件，通过绑定整个store对象让Svelte自动处理双向同步。

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