AngularJS $watch 的 Angular 类似功能是什么

发布于01月03日

在AngularJS中，您可以使用$scope的$watch函数指定观察者来观察作用域变量的变化.什么等同于观察Angular 中的变量更改(例如，在组件变量中)？

推荐答案

在Angular 2中，变化检测是自动的...$scope.$watch()和$scope.$digest()卢比.

不幸的是，开发指南的变更检测部分还没有编写(在Architecture Overview页的底部"其他内容"部分有一个占位符).

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

区js"monkey patches the world"——它拦截浏览器中的所有异步API(当Angular运行时).这就是为什么我们可以在组件中使用setTimeout()而不是像$timeout这样的东西...因为setTimeout()是猴子补的.
Angular建立并维护一棵"变化检测器"树.每个组件/指令都有一个这样的变化检测器(类).(您可以通过注入ChangeDetectorRef来访问此对象.)这些变化检测器是在Angular创建组件时创建的.它们会跟踪所有绑定的状态，以便进行脏判断.从某种意义上说，它们类似于Angular 1为{{}}个模板绑定设置的自动$watches()
与Angular 1不同，更改检测图是一个有向树，不能有循环(这使得Angular 2的性能更高，我们将在下面看到).
当事件触发(在Angular 区域内)时，我们编写的代码(事件处理程序回调)将运行.它可以更新它想要的任何数据--共享应用程序模型/状态和/或组件的视图状态.
After that, because of the hooks Zone.js added, it then runs Angular's change detection algorithm. By default (i.e., if you are not using the onPush change detection strategy on any of your components), every component in the tree is examined once (TTL=1)... from the top, in depth-first order. (Well, if you're in dev mode, change detection runs twice (TTL=2). See ApplicationRef.tick() for more about this.) It performs dirty checking on all of your bindings, using those change detector objects.
- Lifecycle hooks are called as part of change detection.
  If the component data you want to watch is a primitive input property (String, boolean, number), you can implement ngOnChanges() to be notified of changes.
  If the input property is a reference type (object, array, etc.), but the reference didn't change (e.g., you added an item to an existing array), you'll need to implement ngDoCheck() (see this SO answer for more on this).
  You should only change the component's properties and/or properties of descendant components (because of the single tree walk implementation -- i.e., unidirectional data flow). Here's a plunker that violates that. Stateful pipes can also trip you up here.
对于找到的任何绑定更改，都会更新组件，然后更新DOM.更改检测现已完成.
浏览器会注意到DOM的更改并更新屏幕.

了解更多信息的其他参考资料:

Angular’s $digest is reborn in the newer version of Angular-解释来自AngularJS的 idea 如何映射到Angular
Everything you need to know about change detection in Angular-详细解释了引擎盖下的变化检测工作原理
Change Detection Explained-Thoughtram博客，2016年2月22日-可能是最好的参考资料
Savkin's Change Detection Reinvented视频-一定要看这个
How does Angular 2 Change Detection Really Work?-贾德的博客，2016年2月24日
Brian's video和Miško's video关于区域.js.布莱恩是关于区域的.js.Miško的是Angular 2如何使用Zone.js来实现变化检测.他还谈到了一般的变化检测，还有一点关于onPush.
维克多·萨夫金斯(Victor Savkins)博客帖子:Two phases of Angular 2 applications70125256/change-detection-in-angular-2" rel="noreferrer">Change Detection in Angular 2,Two phases of Angular 2 applications,Angular, Immutability and Encapsulation.他很快就涵盖了很多领域，但他有时也会很简洁，你会感到挠头，想知道遗漏的部分.
Ultra Fast Change Detection(Google文档)-非常技术性、非常简洁，但是它描述/勾画了作为树的一部分构建的ChangeDetection类