angularjs - Angular 相当于 AngularJS $watch 是什么？

Question

在 AngularJS 中，您可以使用 $watch 指定观察者来观察范围变量的变化。 $scope的功能.在 Angular 中观察变量变化(例如，组件变量)的等价物是什么？

Answer 1

在 Angular 2 中，更改检测是自动的... $scope.$watch() 和 $scope.$digest() R.I.P.

不幸的是，开发指南的变更检测部分还没有编写(在 Architecture Overview 页面底部附近有一个占位符，在“其他东西”部分)。

以下是我对变更检测工作原理的理解:

Zone.js “猴子修补世界”——它拦截浏览器中的所有异步 API(当 Angular 运行时)。这就是为什么我们可以在我们的组件中使用 setTimeout() 而不是 $timeout 之类的东西......因为 setTimeout() 是猴子补丁。

Angular 构建并维护一个“变化检测器”树。每个组件/指令都有一个这样的变化检测器(类)。 (你可以通过注入(inject) ChangeDetectorRef 来访问这个对象。)这些变化检测器是在 Angular 创建组件时创建的。它们会跟踪所有绑定(bind)的状态，以进行脏检查。从某种意义上说，这些类似于 Angular 1 为 $watches() 模板绑定(bind)设置​​的自动 {{}}。与 Angular 1 不同，变化检测图是一个有向树并且不能有循环(这使得 Angular 2 的性能更高，因为我们将在下面看到)。

当事件触发时(在 Angular 区域内)，我们编写的代码(事件处理回调)就会运行。它可以更新它想要的任何数据——共享的应用程序模型/状态和/或组件的 View 状态。

之后，因为添加了Hooks Zone.js，然后运行Angular的变化检测算法。默认情况下(即，如果您没有在任何组件上使用 onPush 更改检测策略)，树中的每个组件都会检查一次 (TTL=1)... 从顶部开始，深度优先。 (好吧，如果您处于开发模式，更改检测会运行两次(TTL=2)。有关此内容的更多信息，请参阅 ApplicationRef.tick()。)它使用这些更改检测器对象对您的所有绑定(bind)执行脏检查。

生命周期钩子(Hook)作为变更检测的一部分被调用。如果您要查看的组件数据是原始输入属性(字符串、 bool 值、数字)，您可以实现 ngOnChanges() 以收到更改通知。如果输入属性是引用类型(对象、数组等)，但引用没有改变(例如，您向现有数组添加了一个项目)，则需要实现 ngDoCheck()(有关更多信息，请参阅 this SO answer这个)。您应该只更改组件的属性和/或后代组件的属性(因为单树遍历实现——即单向数据流)。这是 a plunker 违反了这一点。有状态管道也可以 trip you up 在这里。

对于发现的任何绑定(bind)更改，更新组件，然后更新 DOM。变更检测现已完成。

浏览器注意到 DOM 变化并更新屏幕。

其他引用资料以了解更多信息:

Angular’s $digest is reborn in the newer version of Angular - 解释了 AngularJS 的想法如何映射到 Angular

Everything you need to know about change detection in Angular - 非常详细地解释了变化检测的工作原理

Change Detection Explained - Thoughtram 博客 2016 年 2 月 22 日 - 可能是最好的引用

Savkin 的 Change Detection Reinvented 视频 - 一定要看这个

How does Angular 2 Change Detection Really Work? - jhade 的博客 2016 年 2 月 24 日

Brian's video 和 Miško's video 关于 Zone.js。 Brian 是关于 Zone.js 的。 Miško 是关于 Angular 2 如何使用 Zone.js 来实现变更检测的。他还谈到了一般的变更检测，以及一些关于 onPush 的内容。

Victor Savkins 博客文章: Change Detection in Angular 2 、 Two phases of Angular 2 applications 、 Angular, Immutability and Encapsulation 。他很快就覆盖了很多地方，但有时他会很简洁，你会挠头，想知道丢失的部分。

Ultra Fast Change Detection (Google doc) - 技术性很强，非常简洁，但它描述/草绘了作为树的一部分构建的 ChangeDetection 类