在过去的8个月里，我大部分空闲时间都是reverse-engineering Angular。我最感兴趣的话题是变化检测。我认为它是框架中最重要的部分，因为它负责像DOM更新、输入绑定和查询列表更新这样的“可视”工作。我的探索产生了一系列深入的文章，突出了变化检测机制的主要思想，深入了解它的实现细节。在这篇文章中，我把它们放在一起，简短地描述了每一个你能找到什么。一旦你读完它们，你将获得变化检测启发?。

理解变化检测

下面是5篇深入研究的文章，它们将极大的扩展你所知道的Angular变化检测过程的范围。每篇文章建立在前一个解释的信息基础上，所以我建议你按照他们在这里列出的顺序阅读它们。

Angular’s $digest is reborn in the newer version of Angular

这篇文章把AngularJS的digest过程和Angular的变化检测进行了对比。它解释了对两者的需求，并说明如何使用相同的脏检查概念来构建它们。然后提供了一些例子，论证了Angular的生命周期钩子如何作为相同的机制在AngularJS的$watch中进行使用。它还表明了Angular现在所谓的从上到下的单项数据流不同于AngularJS 。文章解释了这个强制执行背后的原因以及它对架构的好处和限制。本文将对那些正寻找迁移到Angular有AngularJS经验的开发者是非常有用的。

Do you still think that NgZone (zone.js) is required for change detection in Angular?

这篇文章描述了NgZone是如何在zone.js这个库上实施的以及NgZone 在这个框架上扮演的角色。与通常的观点相反，它不是变化检测过程的一部分，而是用来触发它的。文章首先说明Angular可以检测变化进行渲染，没有ngzone和zone.js，进而说明NgZone带来的价值以及它如何实现的。文章的大部分内容是解释常用的公共API如isStable, onUnstable 和 onMicrotaskEmpty。文章最后解释了当使用第三方库的时候比如GOOGLEAPI一些常见的不会被检测到的变化陷阱。

Everything you need to know about change detection in Angular

如果您想深入了解变更检测机制，这篇文章是必读的。它提供了如何使用相关链接进行进一步探索的高级概述。编写工作首先介绍了一个称为View的内部组件表示，并解释了变更检测过程在视图上运行。然后，它列出了在执行顺序的变化检测期间执行的所有操作的列表。这些操作包括更新视图状态、渲染、处理输入绑定和调用生命周期钩子。最后它解释了ChangeDetectorRef 公共的API如detach, detectChanges 和 markForCheck以及提供了方法用法的简短示例。

The mechanics of DOM updates in Angular

本文深入探讨了与DOM的同步应用模型中的实现细节，即单向数据绑定或DOM渲染。此操作在变更检测过程中占据中心位置，因为它正是使组件在DOM渲染中呈现变化的原因。本文首先介绍了关于View(视图)概念的附加细节，特别是View Factory (视图工厂)和几个基本类型的View Nodes(视图节点)。然后，它展示了变更检测机制如何通过对这些节点进行插值或输入绑定来执行DOM更新设置。

The mechanics of property bindings update in Angular

与前面关于DOM更新的文章类似，这篇文章探讨了负责更新子组件和指令的输入绑定的过程的实现细节。它引入了绑定定义的概念及其在变化检测过程中的作用。然后，它将演示编译器在处理属性绑定的模板语法时，如何生成这些绑定定义。最后，它概述了在视图节点上运行变化检测和更新子组件和指令的输入属性的一个循序渐进的过程。

避免常见的困惑

这里是另外一些有价值的文章列表，可以解释我在stackoverflow经常看到的关于变化检测的一些困惑。

Do you really know what unidirectional data flow means in Angular

本文解释双向数据绑定和单向数据流之间的区别。它演示了在Angular和AngularJS 中更新输入绑定的过程是如何不同的，以及这种差异是如何重要的。

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error

这篇文章解释了Angular社区频繁和经常被误解的错误背后的原因和机制。虽然有些开发人员认为它是一个bug，但实际上这是一个设计决策，通过将变更检测运行限制为单个运行，而不是AngularJS中的多次运行($digest runs)，从而提高性能。本文解释了如何抛出错误有助于防止模型数据和UI之间的不一致，从而将错误或旧数据显示给页面上的用户。本文主要由两部分组成：第一部分探讨错误产生的原因，第二部分提出可能的修正。它还解释了为什么不在生产模式中抛出错误。

If you think ngDoCheck means your component is being checked

本文对于为什么使用OnPush策略组件的ngDoCheck周期钩子被引发即使对这些组件的输入绑定没有改变提供了一个详细的回答。它解释了通常未预料到的事实：当父组件被选中时，钩子会触发子组件，并显示该机制是如何触发ngDoCheck的，即使看起来没有理由这样做。文章的第二部分通过演示几个用例回答了我们需要ngDoCheck的问题。

The essential difference between Constructor and ngOnInit in Angular

关于在stackoverflow有超过10万看法的最受欢迎的Angular问题，本文提供了一个详细的回答，那就是构造函数和ngOnInit之间的差异。本文给出了一个全面的比较，突出了用法上的差异，并对组件初始化过程进行了分析。

Angular air 上有趣的插曲

我还强烈推荐观看Angular Air episode，我在这里讨论视图层的内部表示和更改检测渲染部分。我也揭示了zones 和使用ChangeDetectorRef变化检测手动控制相关的一些常见的误解

关于Angular内幕的实物书

我开始写一本关于Angular内幕的综合书。它将被称为“Angular内幕，框架结构的最终指南”，并将对编译器、视图、DI和更改检测机制如何在引擎盖下工作进行深入的解释。我还计划在调试或优化工作时，包含一些真实的示例，说明在虚拟机引导下实现的知识可能会有什么帮助。这本书大约有150到200页长，有很多图表便于理解材料。如果你感兴趣的话，你会买一本关于Angular内幕的书吗？文章提供了更多关于这本书的信息，并包含一个订阅表格，你可以用它告诉我你有兴趣买这本书。

感谢您的阅读! 如果喜欢这篇文章, 请点赞。 它对我意义重大，它能帮助其他人看到这篇文章。 对于更高级的文章，你可以在Twitter或Medium上跟随我。

参考资源