Angular Signals：mutate()与forEach()的响应性差异及适用场景

核心本质区别 #

• 原生Array API（如forEach修改元素、push、splice）仅修改数组/对象的内部内容，但不会改变其引用地址。Angular Signals默认依赖值的引用变化触发响应，因此单纯用原生API修改Signal包裹的数组/对象，Signal无法感知到变化，不会更新UI。
• Signal的mutate()、update()是Angular提供的专门API，用于主动通知Signal内部值发生了变更：
  • mutate()：允许直接修改Signal内部的可变对象/数组（无需返回新值），执行后自动触发Signal的变更通知。
  • update()：接收当前Signal的值，返回一个新的引用（如新数组、新对象），Signal会用新值替换旧值并触发更新。

具体使用场景 #

1. 修改Signal内部可变对象/数组的内容，且不想创建新引用 → 用mutate()

// 示例：修改Signal数组中元素的属性
const users = signal([{name: 'Alice', age: 25}]);
users.mutate(arr => {
  arr[0].age = 26; // 直接修改原数组元素，mutate自动通知更新
});

2. 基于当前值生成新的引用（如过滤、映射数组） → 用update()

// 示例：生成新的翻倍数组
const numbers = signal([1,2,3]);
numbers.update(arr => arr.map(n => n * 2)); // 返回新数组，触发UI更新

3. 原生Array API的局限性
   如果直接用原生API修改Signal包裹的数组（比如users()[0].age = 26），由于数组引用未变，Signal不会触发响应。除非你手动调用set()传入新引用（如users.set([...users()])），但这种写法冗余，远不如mutate()简洁。

只有当数组不是Signal包裹的普通组件属性时，原生Array API结合Zone.js的自动变更检测才会触发UI更新。但只要是Signal包裹的可变数据，必须用Signal API来通知变更。

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