Svelte each块事件处理修改对象属性出现不同结果问题咨询

核心原因 #

该现象由Svelte的编译时响应式触发规则导致：Svelte只会识别事件回调顶层作用域内的响应式变量属性赋值操作，自动触发视图更新，不会深入普通函数内部分析是否存在属性修改行为。

三种场景的具体逻辑 #

• 步骤1（内联修改生效）：内联回调中直接执行cat.name='inline'赋值，属于回调顶层的属性修改，Svelte编译阶段可识别到这是对each块内响应式元素的修改，会自动生成视图更新代码，修改结果会实时同步到页面。
• 步骤2（命名函数修改不生效）：赋值逻辑封装在named函数内部，Svelte默认不会深入解析普通函数的内部操作，因此判定该回调没有修改任何响应式变量，不会触发视图更新。注意：此时cat的name属性实际已经被修改，只是没有触发重渲染，页面无法展示变化。
• 步骤3（先内联赋值再调用函数生效）：内联回调顶层的cat.name='inline'已经被Svelte标记为需要触发更新的操作，后续named函数对cat属性的修改会跟着这次视图更新一起同步到页面，因此能看到最终的修改结果。

解决方案 #

如果需要在命名函数中修改属性也能正常触发视图更新，可选择以下任意一种方案：

1. 修改完属性后手动触发响应式更新，在函数末尾添加cats = cats即可，这是Svelte官方推荐的手动触发对象/数组更新的方式：

const named = (cat) => {
  cat.name = 'named';
  cats = cats; // 手动触发响应式更新
}

2. 将修改后的值返回，在回调顶层完成赋值操作，让Svelte可以识别到修改：

// 调整命名函数逻辑
const named = () => 'named';
// 事件回调修改为
on:click={() => cat.name = named()}

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