变更检测的工作原理
了解 Angular 的变更检测周期
变更检测的工作原理 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
什么是变更检测
变更检测是 Angular 用来使 DOM 与组件状态保持同步的过程。当数据发生变化时，Angular 会重新评估绑定，并只更新有差异的部分。
检测周期
Angular 从根组件开始向下遍历组件树，检查每个组件的绑定。这次从上到下的遍历就是一次变更检测周期（tick）。
什么会触发 tick
默认情况下，Angular 会在异步事件之后运行变更检测，例如 DOM 事件、计时器和 HTTP 响应。这由 Zone.js 协调完成。
Zone.js
Zone.js 会对异步 API（setTimeout、addEventListener、Promise、XHR）进行猴子补丁处理，使 Angular 知道某个操作何时完成，以及是否可能需要执行一次 tick。
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone 为 Angular 封装了 Zone.js。您可以在 Angular 区域之外运行代码，避免高频循环触发变更检测。
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});重新进入区域
若要从区域外更新界面，请使用 run 重新进入该区域，使 Angular 安排一次 tick。
this.zone.run(() => {
this.ready = true;
});默认策略
使用默认策略时，每个组件都会在每次 tick 中接受检查。这种方式简单且安全，但在大型组件树中可能会造成不必要的开销。
比较绑定值
Angular 使用 Object.is 将每个绑定的当前值与先前值进行比较。如果值未发生变化，就不会操作 DOM。
表达式应保持纯净
模板表达式会在每次检查时运行，因此必须快速且不能产生副作用。请避免直接在模板中调用开销较大的函数。
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
在开发模式下，Angular 会执行第二次验证遍历。如果两次遍历之间某个值发生变化，您就会收到 ExpressionChangedAfterItHasBeenCheckedError，这表示状态在渲染期间发生了变更。
手动控制
注入 ChangeDetectorRef 来控制检测：markForCheck()、detectChanges() 和 detach() 可提供细粒度控制。
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();快速检查
测试您对变更检测的理解。
回顾
您已学习到，变更检测是一次从上到下遍历组件树的过程，用于将状态同步到 DOM；它会通过 Zone.js/NgZone 由异步事件触发，并使用 Object.is 比较绑定值。ChangeDetectorRef 提供手动控制能力。
常见问题解答
「变更检测的工作原理」课时是免费的吗？
是的 — 「变更检测的工作原理」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「变更检测的工作原理」这节课中我会学到什么？
了解 Angular 的变更检测周期 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「变更检测的工作原理」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。