AngularJS中$digest和$apply

最新推荐文章于 2024-02-23 21:35:47 发布

东语~

最新推荐文章于 2024-02-23 21:35:47 发布

阅读量684

点赞数 1

分类专栏： angularjs 文章标签： angularjs digest apply

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/psp0001060/article/details/73381560

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

检测变量值发生变化

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

能通过固定的接口才能改变变量的值，比如说只能通过set()设置变量的值，set被调用时比较一下之前的值，就知道原值是否发生变化。缺点是写法繁琐。
脏检查。将原来对象复制一份快照，在某个时间点，比较现在对象与快照的值，如果不一样就表明发生变化，这个策略要保留两份变量，而且要遍历对象，比较每个属性，这样会有一定性能问题。

angular的实现是采用脏检查。

脏检查对象

不会检查$scope中所有的对象，当对象被绑定到html中，这个对象添加为检查对象($watcher);
不会检查所有属性，当属性被绑定后，这个属性会被列为检查属性。
在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);
};