Angular开发模式ChangedAfterChecked错误的比对值及存储时机问题

你提到的校验是Angular开发模式专属的双变更检测机制，目的是校验单向数据流规则是否被违反，触发ExpressionChangedAfterItHasBeenCheckedError的核心逻辑就是这个比对。

参与比对的两个值 #

以你给出的插值绑定示例<span>{{name}}</span>为例，参与比对的两个值分别是：

• 本次变更检测周期首次计算绑定时，获取到的name属性值（会被临时缓存到组件视图的绑定状态存储中）
• 本次变更检测周期所有逻辑执行完成后，二次计算绑定得到的name属性最新值

取值存储的生命周期时机 #

两个值的获取/存储对应不同的生命周期节点：

1. 第一个值的存储：发生在当前组件ngAfterContentChecked钩子执行完成后，DOM更新操作执行前。此时Angular会遍历当前组件所有的插值、属性绑定，计算每个绑定的当前值并写入缓存，后续会用这些值更新DOM节点。
2. 第二个值的计算：发生在当前组件ngAfterViewChecked钩子执行完成后，也就是本次变更检测周期的所有逻辑（包括子组件的全量变更检测、所有生命周期钩子执行、DOM更新）都处理完毕后，开发模式下会重新遍历所有绑定计算最新值，和缓存的旧值做比对。

对你现有理解的纠正 #

你的理解是不准确的，正确逻辑和你说的刚好相反：不是等变更检测完成后存更新后的值再比对，而是变更检测过程中第一次计算绑定值时就先把值缓存下来，等整个变更检测周期全部执行完毕后，再重新计算一次绑定值和之前缓存的值做比对。
这么设计的目的是确保整个变更检测周期内，绑定值不会被后续执行的生命周期钩子（比如ngAfterViewInit、子组件的生命周期方法）意外修改，符合Angular的单向数据流规范。

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