为什么Angular的ngFor无需像Vue、React那样强制要求传入key属性

核心差异是三个框架的列表更新、diff逻辑从底层设计上就不一样。

• Vue、React的虚拟DOM diff默认采用同层索引对位对比策略：如果不给列表项传唯一key，遇到列表增删、排序操作时，框架会按当前位置逐个匹配节点，很容易出现组件状态错绑、大量不必要的DOM销毁重建问题。这也是create-react-app、Vue CLI会强制弹警告的原因——默认策略存在已知的体验和性能坑，必须靠开发者手动传key规避。
• Angular的*ngFor从设计之初就内置了默认的元素跟踪逻辑，根本不需要开发者手动传key就能保证基础的更新效率和状态正确性：
  • 渲染对象类型的列表项时，默认按对象引用跟踪：只要数组里某一项的对象引用没变化，Angular就直接复用对应的DOM节点和组件实例，完全不会触发这一项的重渲染
  • 渲染字符串、数字这类原始值列表时，默认按值本身做跟踪，也不会出现状态错绑问题

常规业务场景下（比如接口拉取列表直接渲染、仅在数组末尾追加/删除项），Angular默认的引用跟踪性能甚至比你在React/Vue里手动传索引当key的表现更好，自然没必要弹警告要求开发者额外加参数。

什么时候需要自定义跟踪逻辑？ #

只有当你碰到以下两类场景时，才需要像Vue/React传key那样，给*ngFor自定义trackBy函数指定唯一跟踪标识：

1. 频繁对列表做排序、中间插入/删除项的操作
2. 列表数据会被整体替换为新引用对象（比如重复拉取同列表接口，返回的新数组里每个对象都是新引用，但实际id、内容完全一致）

自定义trackBy的写法非常简单：

// 组件类中定义跟踪函数，返回值作为项的唯一标识
trackItemById(index: number, item: {id: number, name: string}) {
  return item.id;
}

<!-- 模板中绑定到*ngFor上即可 -->
<div *ngFor="let item of itemList; trackBy: trackItemById">
  {{ item.name }}
</div>

这种写法的效果和Vue/React中给列表项传key={item.id}、:key="item.id"完全一致，能最大化复杂列表操作下的渲染效率。

别觉得Angular没key提示就是设计疏漏，它的列表更新逻辑是和自身的定向变更检测机制深度绑定的，默认策略已经覆盖了绝大多数常规业务场景的性能需求，不会出现默认逻辑下的状态错绑bug，自然不需要加强制警告。

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