Angular 中的变化检测：您需要了解的一切

这篇关于 Angular 中的变更检测的文章最初发表在 Angular In Depth 博客上，经许可在此处重新发布。 如果您像我一样希望全面了解 Angular 中的变更检测机制，那么您基本上必须探索源代码，因为网络上可用的信息并不多。 大多数文章提到每个组件都有自己的变更检测器，负责检查组件，但它们并没有超出这一范围，并且主要关注不可变和变更检测策略的用例。 本文为您提供了了解不可变用例为何有效以及更改检测策略如何影响检查所需的信息。此外，您将从本文中学到的内容将使您能够自行提出各种性能优化方案。 本文的第一部分非常技术性，并且包含许多源链接。它详细解释了变更检测机制在幕后如何工作。其内容基于最新的 Angular 版本（撰写本文时为 4.0.1）。



此版本中更改检测机制的实现方式与早期的 2.4.1 不同。如果有兴趣，您可以在Stack Overflow 答案中阅读一些有关它如何工作的信息。 本文的后半部分展示了如何在应用程序中使用更改检测，其内容适 WhatsApp 号码数据 用于 Angular 的早期 2.4.1 和最新的 4.0.1 版本，因为公共 API 没有更改。 Learn to Code with JavaScript 视图作为核心概念 Angular 应用程序是一个组件树。然而，在底层，Angular 使用了一种称为view的低级抽象。视图和组件之间存在直接关系：一个视图与一个组件关联，反之亦然。视图保存对属性中关联的组件类实例的引用component。所有操作（例如属性检查和 DOM 更新）都是在视图上执行的。因此，从技术上来说，更正确的说法是 A而组件可以描述为视图的更高级别概念。



以下是您可以在源代码中读到的有关该视图的内容： 视图是应用程序 UI 的基本构建块。它是一起创建和销毁的最小元素组。 视图中元素的属性可以更改，但视图中元素的结构（数量和顺序）不能更改。更改元素的结构只能通过 ViewContainerRef 插入、移动或删除嵌套视图来完成。每个视图可以包含许多视图容器。 在本文中，我将互换使用组件视图和组件的概念。 这里需要注意的是，网络上所有关于变更检测的文章和 Stack Overflow 上的答案都指的是我在这里描述的视图，即 。实际上，没有单独的对象用于更改检测，而视图是更改检测运行的对象。 每个视图都通过节点属性链接到其子视图，因此可以对子视图执行操作。