Angular Signal的set()、update()、mutate()为何需同时提供？

一、set()：直接赋值的语义化选择 #

set()的核心是无需依赖当前值，直接设置新值，它的必要性体现在两点：

• 语义清晰：当你明确知道目标值（比如后端返回的新数据、用户输入的固定值）时，siggy.set(newValue)比siggy.update(() => newValue)更直观，一眼就能看出这是直接赋值操作，而非基于旧值的计算。
• 性能略优：无需执行回调函数，直接完成值的替换，高频赋值场景下能减少微小的性能开销。

虽然可以用siggy.set(siggy() + 1)模拟update的效果，但这种写法本质是先读旧值再赋值，既偏离set的设计初衷，还存在潜在竞态风险。

二、update()：原子性的基于旧值更新 #

update()的核心是原子性地基于当前最新值生成新值，这是它不可替代的关键：

• 避免竞态条件：当多个异步操作同时修改同一个Signal时，直接用set(siggy() + 1)会因读取旧值导致结果不符合预期。示例：

  const siggy = signal(4);
  // 两个异步set操作最终结果为5（都读取初始值4）
  setTimeout(() => siggy.set(siggy() + 1), 0);
  setTimeout(() => siggy.set(siggy() + 1), 0);
  
  // 两个异步update操作最终结果为6（每次都基于最新值计算）
  setTimeout(() => siggy.update(a => a + 1), 0);
  setTimeout(() => siggy.update(a => a + 1), 0);
  

  update的回调在Signal内部更新流程中执行，确保获取的是当前最新信号值，从根源避免竞态问题。
• 语义明确：当更新逻辑必须依赖当前值时，update的写法能清晰传达“基于旧值生成新值”的意图，比set的间接写法更易维护。

三、mutate()：引用类型的高效局部修改 #

你之前对mutate()的用法有误，它的核心作用是直接修改数组、对象等引用类型的内部状态，同时通知Signal更新，无需创建新引用。正确用法示例：

// 修改数组内部元素
const arrSig = signal([1, 2, 3]);
arrSig.mutate(arr => arr.push(4)); // 直接修改原数组，Signal触发更新

// 修改对象属性
const objSig = signal({ name: 'Alice', age: 25 });
objSig.mutate(obj => obj.age = 26); // 直接修改原对象属性

它的必要性体现在：

• 性能优化：对于大型数组、复杂对象，创建新引用（比如set([...arrSig(), 4])）会带来额外内存开销和复制成本，mutate直接修改原引用内部状态，能显著提升性能。
• 代码简洁：无需手动复制整个对象/数组，局部修改逻辑更简洁直观。

你之前写的siggy.mutate(a => a = [...a, 4])是错误用法，本质是替换引用，和set()效果完全一致，浪费了mutate的设计价值。

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