AngularJS数据双向绑定后发生了什么？

        大家好，我是IT修真院学员，一枚正直纯洁善良的WEB程序员，今天给大家分享一下，修真院官网JS任务9，深度思考中的知识点-AngularJS数据双向绑定后发生了什么？

一、背景介绍

AngularJS Context

        正常来讲，浏览器接受到事件后会执行对应的回调函数， 这将进入 JavaScript 上下文； 一旦回调函数完成，浏览器将离开 JavaScript 上下文并根据 DOM 更改重新呈现视图， 等待更多的事件。 AngularJS 拓展了这个循环，生成一个Angular context。

二、知识剖析

$watch list

    我们可以想像一下，在我们的代码中有一个$watch list，每当你的模板中添加了一条数据绑定，angualr就会向$watch list中添加一个$watch:   

    当我们在模板中写下下面的代码：

index.html

User: < input type = "text" ng-model = "user" />

Password: < input type = "password" ng-model = "pass" />

    我们将会得到两个model：$scope.user和$scope.pass，并且angular向$wacth list中添加了两条$watch。

File : controllers . js

app . controller ( 'MainCtrl' , function ($scope) {

$scope . foo = "Foo" ;

$scope . world = "World" ;

});

File : index . html

Hello , {{ World }}

    在上面的例子中，即便我们在 $scope上添加了两个东西，但是只有一个绑定在了UI上，因此在这里只生成了一个 $watch

再看下面的例子：

File : controllers . js

app . controller ( 'MainCtrl' , function ($scope) {

$scope . people = [ ... ];

});

File: index.html

< ul >

< li ng-repeat = "person in people" >

{{person.name}} - {{person.age}}

</ li >

</ ul >

    有多少$watch被创建呢？两个表达式（{{person.name}}和{{person.age}}）和一个指令（ng-repeat），假如$scope .people  有10条数据，那么将会创建21条$watch.因此，每一个绑定到了UI上的数据都会生成一个$watch。对，那这些$watch是什么时候生成的呢？当我们的模版加载完毕时，也就是在linking阶段，Angular解释器会寻找每个directive，然后生成每个需要的$watch。听起来不错哈，但是，然后呢？

$digest loop

    我们前面提到了angular扩展了浏览器处理事件的循环，当浏览器接收到可以被angular context处理的事件时，$digest循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列；

图片来源于Angular官方文档

那么这个循环的过程是怎样的呢？$digest会循环遍历$watch list中存在的每一个$watch，询问他们是否发生了变化：

• Hey $watch, what is your value?
  • It is 9
• Alright, has it changed?
  • No, sir.
• (nothing happens with this one, so it moves to the next)
• You, what is your value?
  • It is Foo.
• Has it changed?
  • Yes, it was Bar.
• (good, we have a DOM to be updated)
• This continues until every $watch has been checked.

    这就是dirty-checking（脏检查）当所有的$watch都被检查过之后，如果有$watch发生了变化，会再触发一次$digest循环以确保没有$watch再发生过变化，之后再更新DOM,需要注意的是$digest循环的上限是10次，超过10次，浏览器就会会抛出一个抛出一个异常。

看下面的例子：

File : controllers . js

app . controller ( 'MainCtrl' , function () {

$scope .name = "Foo" ;

$scope . changeFoo = function () {

$scope .name = "Bar" ;

}

});

File: index.html

{{ name }}

< button ng-click = "changeFoo()" > Change the name </ button >

    这里只生成了一个$watch，ng-click并不会生成$watch 因为ng-click触发的是一个函数，而函数本身是不会发生变化的；当我们点击button时，会发生一下变化：

• 我们按下按钮
• 浏览器接收到一个事件，进入AngularJS Context(后面会解释为什么）。
• $digest循环开始执行，查询每个$watch是否变化。
• 由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。
• 新的$digest循环没有检测到变化。
• 浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。

那么由什么来决定什么事件进入AngularJS Context，而哪些又不进入呢？答案是$apply().

    如果当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入。现在你可能会问：刚才的例子里我也没有调用$apply啊，为什么？Angular为了做了！因此你点击带有ng-click的元素时，时间就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后你敲一个f，事件就会这样调用$apply("foo = 'f';")。

    但是当我们自己定义一个指令时，angular 并不会为我们自动调用$apply();此时会发生什么呢？我们来看下面这个例子：

app.directive( 'clickable' , function () {   return  {    restrict: "E" ,    scope: {      foo: '=' ,      bar: '='    },    template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>' ,    link: function (scope, element, attrs) {      element.bind( 'click' , function () {        scope.foo++;        scope.bar++;      });    } }   });   app.controller( 'MainCtrl' , function ($scope) {    $scope.foo = 0;    $scope.bar = 0; });

它将foo和bar从controller里绑定到一个list里面，每次点击这个元素的时候，foo和bar都会自增1。

那我们点击元素的时候会发生什么呢？我们能看到更新吗？答案是否定的。因为点击事件是一个没有封装到$apply里面的常见的事件，这意味着我们会失去我们的计数吗？不会

真正的结果是：$scope确实改变了，但是没有强制$digest循环，监视foo 和bar的$watch没有执行。也就是说如果我们自己执行一次$apply那么这些$watch就会看见这些变化，然后根据需要更新DOM。

如果我们点击这个directive（蓝色区域），我们看不到任何变化，但是我们点击按钮时，点击数就更新了。如刚才说的，在这个directive上点击时我们不会触发$digest循环，但是当按钮被点击时，ng-click会调用$apply，然后就会执行$digest循环，于是所有的$watch都会被检查，当然就包括我们的foo和bar的$watch了。

现在你在想那并不是你想要的，你想要的是点击蓝色区域的时候就更新点击数。很简单，执行一下$apply就可以了：

element.bind( 'click' , function () {    scope.foo++;    scope.bar++;      scope.$apply(); });

$apply是我们的$scope（或者是direcvie里的link函数中的scope）的一个函数，调用它会强制一次$digest循环（除非当前正在执行循环，这种情况下会抛出一个异常，这是我们不需要在那里执行$apply的标志）。

还有一种更好的使用$apply的方法：

element.bind( 'click' , function () {    scope.$apply( function () {        scope.foo++;        scope.bar++;    }); })

有什么不一样的？差别就是在第一个版本中，我们是在angular context的外面更新的数据，如果有发生错误，Angular永远不知道。很明显在这个像个小玩具的例子里面不会出什么大错，但是想象一下我们如果有个alert框显示错误给用户，然后我们有个第三方的库进行一个网络调用然后失败了，如果我们不把它封装进$apply里面，Angular永远不会知道失败了，alert框就永远不会弹出来了。

三、 常见问题

1、如何自定义$watch?

四、解决方案

app.controller( 'MainCtrl' , function ($scope) {    $scope.name = "Angular" ;      $scope.updated = -1;      $scope.$watch( 'name' , function () {      $scope.updated++;    }); });

index.html

<body ng-controller= "MainCtrl" >    <input ng-model= "name"  />    Name updated: {{updated}} times. </body>

这就是我们创造一个新的$watch的方法。第一个参数是一个字符串或者函数，在这里是只是一个字符串，就是我们要监视的变量的名字，在这里，$scope.name(注意我们只需要用name)。第二个参数是当$watch说我监视的表达式发生变化后要执行的。我们要知道的第一件事就是当controller执行到这个$watch时，它会立即执行一次，因此我们设置updated为-1。

    

app.controller( 'MainCtrl' , function ($scope) {    $scope.name = "Angular" ;      $scope.updated = 0;      $scope.$watch( 'name' , function (newValue, oldValue) {      if  (newValue === oldValue) { return ; } // AKA first run      $scope.updated++;    }); });

index.html

<body ng-controller= "MainCtrl" >    <input ng-model= "name"  />    Name updated: {{updated}} times. </body>

    watch的第二个参数接受两个参数，新值和旧值。我们可以用他们来略过第一次的执行。

app.controller( 'MainCtrl' , function ($scope) {    $scope.user = { name: "Fox"  };      $scope.updated = 0;      $scope.$watch( 'user' , function (newValue, oldValue) {      if  (newValue === oldValue) { return ; }      $scope.updated++;    }, true ); });

index.html

<body ng-controller= "MainCtrl" >    <input ng-model= "user.name"  />    Name updated: {{updated}} times. </body>

五、编码实战

六、拓展思考

脏检查机制是否很慢？

脏检查速度很快，如果你在一个模版里有2000-3000个watch，它会开始变慢。

七、参考文献

[1] $watch How the $apply Runs a $digest；

[2]angular官方文档

八、更多讨论

Q1: evalAsync队列是什么？

A1:在进行完脏检查后将需要更新的数据放到evalAsync中异步执行，可以提高性能

Q2:当需要手动执行$digest循环的时候应该用$digest（）还是$apply（）？

A2:官方文档中推荐直接用$apply（），因为他会强制执行$digest loop,但是如果你知道需要遍历的$watch的范围的时候用$digest()就可以了。

Q3:所有的调用函数的指令都不会产生$watch吗？

A3:是的，因为函数是不会改变的。