为什么Angular模板中绑定的方法会被执行4次？

原因说明 #

这个打印4次的现象是Angular的变更检测机制与开发模式的双重作用导致的，具体逻辑如下：

• 模板中直接调用方法的执行逻辑：你在插值语法{{ str() }}中直接调用了组件方法，Angular的变更检测机制运行时，为了保证视图渲染的内容和最新状态一致，每触发一次变更检测周期，都会重新执行一次这个方法来获取最新返回值，因此方法内的console.log每轮变更检测都会执行一次。
• 开发模式的额外校验：Angular默认的开发模式下，每一次变更检测流程会连续执行2次：第一次完成正常的视图更新，第二次用来校验第一次更新后没有产生新的状态变化，避免状态不稳定的问题，若两次执行结果不一致会抛出ExpressionChangedAfterItHasBeenCheckedError错误，帮助开发者提前发现代码问题。如果切换到Angular生产模式，关闭了二次校验逻辑，每轮变更检测只会执行1次。
• 初始化触发次数：页面首次加载初始化的过程中，Angular默认会触发2轮完整的变更检测流程，结合开发模式每轮跑2次的规则，总共就是2*2=4次，和你看到的打印次数完全对应。

优化建议 #

如果要避免这种无意义的重复执行，可以参考以下方案：

• 把需要渲染的值提前存在组件属性中，不要在模板里直接调用方法
• 如果值需要动态计算，优先使用 Angular 纯管道（Pure Pipe），纯管道只有在输入参数变化时才会重新计算
• 可以根据业务场景将组件的变更检测策略调整为ChangeDetectionStrategy.OnPush，减少变更检测的触发频率

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