Svelte基于对象选中的主从视图更新异常原因解析

Svelte的响应式是编译时实现的赋值触发机制，和Vue这类基于运行时Proxy的响应式逻辑有本质区别：编译阶段Svelte会给所有赋值操作插入更新标记，只有变量被直接赋值时，依赖这个变量的视图、响应式语句才会触发更新。它不会在运行时做全局对象引用比对、深度属性追踪——这种设计是Svelte运行时轻量、性能好的核心原因，但也会带来你遇到的这种引用同步问题。

你第一种直接存对象引用的写法，踩的就是响应式跟踪的作用域边界问题：

• 初始化时写let selected = data[1]，Svelte只会把selected当成独立的顶层变量处理，编译阶段不可能预判运行时它会和循环里的哪个row指向同一块内存地址。
• 修改列表中选中行的输入框时，bind:value={row.x}只会给each块作用域内的row打更新标记，这个标记不会同步通知到顶层的selected变量，详情区输入框自然不会更新。
• 反过来修改详情区的selected.x时，更新标记只会打在selected上，Svelte不会主动遍历data数组找和selected同引用的元素，列表里对应行的输入框也不会同步。
• 你观察到的"切走再切回就正常"，本质是切换选中时执行了selected = row这个显式赋值，触发了selected的全量重渲染，视图读取到了对象上最新的属性值而已，不是双向绑定本身在生效。

$: selected = data[selectedIndex]是响应式声明，Svelte编译时会自动收集这句话的所有依赖：data数组和selectedIndex，只要任意一个依赖被标记变更，就会重新执行这句赋值：

• 修改列表里某行的row.x时，因为row是data的元素，Svelte会同时标记data为变更状态，触发$:语句重新执行，给selected重新赋值。哪怕赋值后selected的引用和之前完全一样，赋值动作本身就会给selected打更新标记，通知详情区输入框读取最新值。
• 反过来修改详情区的selected.x时，Svelte通过响应式声明能明确知道selected来自data数组，修改selected.x会同步标记data变更，触发列表each块重渲染，对应行的输入框自然就同步了。

• 写主从结构这类场景时，优先用唯一ID、数组索引作为选中状态的存储源，不要直接存对象引用，从根源上避免这类跨作用域的引用同步问题。
• 如果特殊场景必须存对象引用，修改属性后可以手动执行selected = selected这类同值赋值，强制触发更新，但这种写法冗余易漏，非必要不推荐。

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