AngularJS中$digest和$apply

本文主要介绍AngularJS的脏检查策略及$digest和$apply 作用。

检测变量值发生变化

Angular最耀眼的功能就是数据的双向绑定。那么如何检测变量值发生变化了呢？
检测一个变量值发生变化，主要有两种方式。

1. 能通过固定的接口才能改变变量的值，比如说只能通过set()设置变量的值，set被调用时比较一下之前的值，就知道原值是否发生变化。缺点是写法繁琐。

2. 脏检查。将原来对象复制一份快照，在某个时间点，比较现在对象与快照的值，如果不一样就表明发生变化，这个策略要保留两份变量，而且要遍历对象，比较每个属性，这样会有一定性能问题。

   angular的实现是采用脏检查。

脏检查对象

1. 不会检查$scope中所有的对象，当对象被绑定到html中，这个对象添加为检查对象($watcher);
2. 不会检查所有属性，当属性被绑定后，这个属性会被列为检查属性。
3. 在angular程序初始化时，会将绑定的对象的属性添加为监听对象(watcher)，也就是说一个对象绑定了N个属性，就会添加N个watcher。

$scope.$watch('aModel',function(newValue,oldValue) {
  //update the DOM with newValue
});

脏检查何时开始

angular中脏检查有两种方式：自动检查$digest()，手动检查$apply()。

• 自动检查：angular系统提供的方法（如：ng-xx事件）执行后，会自动调用$digest() 检查$$watchers（$watch列表）

• 手动检查$apply()：如果使用angular系统提供的以外的方法，不会自动调用$digest()，此时应该手动调用 $apply()。该函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如，假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时，就必须使用$apply() 。

$scope.getMessage = function() {
  setTimeout(function() {
    $scope.message = 'Fetched after two seconds';
    console.log('message:' + $scope.message);
    $scope.$apply(); //this triggers a $digest
  },2000);
};

$scope.$apply() 会调用$rootScope.$digest(). 然后继续访问子scope的$digest函数。

脏检查何时结束

Anguar遍历完整个$watch列表，只要有任何值发生变化，应用将会退回到$watch循环中，直到检测到不再有任何变化。

为什么要再次运行这一循环？因为如果你更新了$watch列表中某个用于更新另一个值的值，Angular将检测不到更新，除非再次运行这个循环。

如果这个循环运行10次或者更多次，Angular应用会抛出一个异常，同时停止运行。如果Angular没有抛出这个异常，应用就可能进入无限循环，这是糟糕的结果。

结论

在编程时应该明明，angular是否能够检测到变量的变化，如果不能就需要手动调用$apply()。