Svelte组件状态中删除对象键值，如何避免自赋值触发更新

在Svelte组件状态中维护字符串映射对象，通过{#each}循环渲染键值对时，直接使用delete删除对象属性或设为undefined无法触发UI更新，必须通过objInState = objInState这种自赋值方式才能触发响应式更新。以下是几种更优雅的替代方案：

方案1：使用对象解构生成新对象 #

通过ES6解构语法移除目标属性后，将剩余对象重新赋值给状态变量，既符合Svelte的响应式追踪规则，又语义清晰：

<script>
  let objInState = { name: '张三', age: '25', city: '北京' };
</script>

{#each Object.entries(objInState) as [key, value]}
  <div>{key}: {value}</div>
  <button on:click={() => {
    // 解构移除目标属性，生成新对象
    const { [key]: _, ...updatedObj } = objInState;
    objInState = updatedObj;
  }}>删除</button>
{/each}

方案2：使用扩展运算符更新对象（保留属性但设为undefined） #

如果只是需要将属性值设为undefined而非彻底删除键，可以通过扩展运算符生成新对象并赋值：

<script>
  let objInState = { name: '张三', age: '25', city: '北京' };
</script>

{#each Object.entries(objInState) as [key, value]}
  <div>{key}: {value ?? '未设置'}</div>
  <button on:click={() => {
    objInState = { ...objInState, [key]: undefined };
  }}>设为未定义</button>
{/each}

原理说明 #

Svelte的响应式系统基于赋值操作追踪，只有当状态变量本身出现在赋值语句左侧时，才会触发组件更新。直接delete对象属性或修改属性值属于对象内部的变更，不会被Svelte的追踪机制捕获。上述方案通过生成新对象并重新赋值，让状态变量的引用发生变化，从而触发UI更新，比自赋值的写法更直观易懂。

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