Angular模板表达式中调用的getTitle()方法为何执行4次？

这是个特别常见的Angular新手疑惑，我当初刚用Angular的时候也被这个坑过！咱们来一步步拆解原因：

首先要明确核心点：Angular在开发模式下会默认开启「双重变更检测」机制，这是它的安全校验手段——用来检测你的模板表达式有没有产生副作用（比如在getTitle()里偷偷修改组件属性）。如果第一次和第二次检测的结果不一致，Angular就会抛出错误提示你。

那为什么是4次而不是2次呢？因为你的组件初始化过程中，触发了两个独立的变更检测周期：

• 第一个变更检测周期：组件首次创建完成，Angular渲染视图时触发，此时getTitle()被调用1次，然后开发模式下的二次校验又调用1次，这就2次了。
• 第二个变更检测周期：Angular在初始化过程中，还有一些后续操作（比如standalone组件的依赖解析完成、样式资源加载完成，或者DevTools的同步操作）会再次触发变更检测，同样，这次检测也会执行开发模式的二次校验，于是又调用2次，加起来就是4次。

另外要提醒你：绝对不要在模板表达式里调用带副作用（或者有性能开销）的方法，哪怕是console.log这种看似无害的操作，在生产模式下虽然不会有双重检测，但如果变更检测频繁触发，还是会导致不必要的性能损耗。像你这个场景，完全可以直接在模板里写{{title}}，根本不需要通过方法返回。

如果确实需要基于属性计算值，建议在组件里用getter属性（比如get titleText() { return this.title; }），或者在ngOnInit里提前计算好结果存在属性里再绑定到模板，这样就能避免多次调用的问题。

内容来源于stack exchange