Angular中*ngFor何时重渲染DOM？新数组传入为何未全量重绘？

你提到的这个现象，核心是Angular *ngFor默认的元素追踪机制在起作用，并非全量重绘的逻辑失效。

关键细节：默认的引用追踪 #

*ngFor默认会通过对象引用来识别数组中的元素是否为已存在项。在你的示例中：

• 点击按钮后，新数组[...this.todos, { title: 'Three' }]里，前两个{ title: 'One' }和{ title: 'Two' }的对象引用和原数组完全一致
• Angular在对比新旧数组时，能识别出这两个元素是“已存在”的，不会销毁重建对应的DOM节点，只会渲染新增的{ title: 'Three' }元素

什么时候才会触发全量重绘？ #

只有当数组中所有元素的引用都发生变化时，*ngFor才会全量重绘。比如如果你的add方法改成这样：

add() {
  this.todos = this.todos.map(todo => ({ ...todo })).concat({ title: 'Three' });
}

这里通过map创建了每个todo的新对象引用，此时*ngFor会认为所有元素都是新的，就会触发全量重绘。

trackBy的真正作用 #

你之前了解的trackBy，是用于当元素的引用变化，但标识（比如id）不变的场景。比如后端返回的数组，每次请求都会返回新的对象引用，但每个元素的id是固定的。这时候用trackBy基于id追踪，就能避免不必要的重绘：

<div *ngFor="let todo of todos; trackBy: trackById">
  {{todo.title}}
</div>

trackById(index: number, todo: any) {
  return todo.id;
}

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