为何Angular Change Detection在数据无变更时会触发组件重新渲染？

你的猜测完全正确，getter中的console.log执行仅代表Angular进入了变更检测值比对阶段，并不等于组件发生了实际重渲染。

对应场景的变更检测流程拆解 #

Angular的变更检测分为三个核心阶段，你的示例对应的执行逻辑如下：

• 第一阶段：变更检测周期触发
  Angular的所有异步事件（DOM点击、HTTP响应、定时器等）都会自动触发变更检测流转。你使用了OnPush变更策略，组件内部触发的DOM点击事件本身就会让当前组件进入变更检测检查队列，和点击事件内有没有修改值没有关系。
• 第二阶段：模板绑定值比对
  进入检查流程后，Angular需要逐一校验模板中所有绑定表达式的最新值和旧值是否有差异，才能决定要不要更新DOM。你在模板中绑定了lastName这个getter属性，要拿到最新值就必须执行这个getter函数，所以内部的console.log自然会被调用。
• 第三阶段：DOM更新（即实际重渲染）
  只有当比对发现绑定值发生变化时，Angular才会更新对应的DOM节点。你的getter每次返回的都是固定字符串Boodin，前后值完全一致，所以Angular不会对<p>标签做任何修改，组件没有发生实际的重渲染。

相关代码示例 #

组件TS代码 #

import { ChangeDetectionStrategy } from '@angular/core/src/change_detection/constants';

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  get lastName() {
    console.log('CD触发了值检查')
    return 'Boodin';
  }

  buttonClick(){
    // 没有任何赋值操作
  }
}

模板HTML代码 #

<p>{{lastName}}</p>
<button (click)="buttonClick()">触发变更检测</button>

最佳实践建议 #

模板中尽量避免直接绑定getter或方法，尤其是包含复杂计算逻辑的场景。虽然不会触发不必要的DOM更新，但每次变更检测检查都会重复执行逻辑，会造成无意义的性能损耗。如果需要对值做计算，推荐两种方案：

• 提前把计算结果存在类属性中，只在依赖的源数据变化时重新计算
• 使用Angular纯管道（Pure Pipe）封装计算逻辑，纯管道只有当输入值发生变化时才会重新执行

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