AngularJS中$digest和$apply

前端之家收集整理的这篇文章主要介绍了AngularJS中$digest和$apply前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

@H_301_7@检测变量值发生变化

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()

原文链接:https://www.f2er.com/angularjs/147051.html

猜你在找的Angularjs相关文章