[angular]脏值检测：$watch, $watchColl

$watch简单使用

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。

listener: 当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)

objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个例子：

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){
    console.log(newValue  + ' - ' + oldValue);
});

//1秒后改变name变量的值

$timeout(function(){
　　$scope.name = "world";
},1000);

如何注销$watch

太多的$watch将会导致性能问题，$watch如果不再使用，我们最好将其释放掉。

$watch函数返回一个注销监听的函数，如果我们想监控一个属性，然后在稍后注销它，可以使用下面的方式：

    var counter = 0;
    var watch = $scope.$watch('name',function(newValue,oldValue, scope){
        console.log('new:' + newValue + ' old:' + oldValue);
        counter ++;
        //超出停止注销watch
        if (counter > 5 ) {
          watch();
        }
    });

$watchGroup(watchExpressions, listener);

watchExpressions是数组类型

如果要监听多个变量就要写很多个watch，这显然不是很好的作用。

使用$watchGroup可同时监听多个变量，如果任一一个变量发生变化就会触发listener

$scope.teamScore = 0;
$scope.time = 0;
$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) { 
if(newVal[0] > 20){ 
  $scope.matchStatus = 'win'; 
} 
else if (newVal[1] > 60){
  $scope.matchStatus = 'times up';
});

总结：

1. $watchGroup 的第一个参数要传数组，$watchCollection的第一个参数要传对象

2. 监视对象和数组而且监视层次不是特别深，优先使用$watchCollection, $watchCollection可以方便的监视数组的插入，移除。

3. 要同时监视多个变量并执行同一逻辑使用$watchGroup

4. 除此一般情况下使用$watch,如果你知道数据结构的深度，可以直接这样监视。 当第三个参数true，表示深度监测，如果watch的变量比较复杂，效率会变低。