1. 首页
  2. 问题
  3. Angular等效于AngularJS $ watch？
一尘不染

Angular等效于AngularJS $ watch？

angularjs

在AngularJS中，您可以使用的$watch功能指定观察者以观察范围变量的变化$scope。在Angular中监视变量更改（例如，在组件变量中）相当于什么？


阅读 244

收藏
2020-07-04

共1个答案

一尘不染

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

不幸的是，开发指南的“变更检测”部分尚未编写（“
体系结构概述”页面底部“其他内容”
附近有一个占位符）。

这是我对变更检测的工作原理的理解：

  • Zone.js是“猴子为世界打补丁”-拦截浏览器中的所有异步API（当Angular运行时）。这就是为什么我们可以setTimeout()在组件内部使用而不是诸如$timeout…之类的原因，因为setTimeout()猴子打了补丁。

  • Angular构建并维护“变化检测器”树。每个组件/指令只有一个这样的变化检测器（类）。（您可以通过注入来访问该对象ChangeDetectorRef。）这些变化检测器是在Angular创建组件时创建的。他们跟踪所有绑定的状态，以进行脏检查。从某种意义上讲，它们类似于$watches()Angular 1为{{}}模板绑定设置的自动功能。
    与Angular 1不同，更改检测图是有向树，不能有循环（这使Angular 2的性能更高，如下所示）。

  • 当事件触发时（在Angular区域内），我们编写的代码（事件处理程序回调）将运行。它可以更新所需的任何数据-共享应用程序模型/状态和/或组件的视图状态。

  • 之后，由于添加了挂接Zone.js，它将运行Angular的更改检测算法。默认情况下（即，如果未onPush在任何组件上使用更改检测策略），则从树顶开始按深度优先顺序对树中的每个组件进行一次检查（TTL = 1）…。（好吧，如果您处于开发人员模式，则更改检测运行两次（TTL = 2）。有关更多信息，请参见ApplicationRef.tick（）。）它将使用那些更改检测器对象对所有绑定执行脏检查。

    • 生命周期挂钩被称为变更检测的一部分。
      如果要监视的组件数据是原始输入属性（字符串，布尔值，数字），则可以实施ngOnChanges()以通知更改。
      如果输入属性是引用类型（对象，数组等），但是引用没有更改（例如，您将项目添加到现有数组中），则需要实现ngDoCheck()（有关更多信息，请参见此SO答案）在此）。
      您应该仅更改组件的属性和/或后代组件的属性（由于单树遍历实现-
      即单向数据流）。这是违反了这一点的pl子。有状态的管道也可以将您绊倒在这里。

  • 对于找到的任何绑定更改，将更新组件，然后更新DOM。变更检测到此结束。

  • 浏览器会注意到DOM更改并更新了屏幕。

其他参考以了解更多信息：

2020-07-04