如何理解angular的脏检查?

 
     【js-09】 
      如何理解angular的脏检查? 
      分享人：深圳web第八期学员cxy 
 
 
     目录 
     1.背景介绍 
     2.知识剖析 
     3.常见问题 
     4.解决方案 
     5.编码实战 
     6.扩展思考 
     7.参考文献 
     8.更多讨论 
 
 
     
一.背景介绍 
     
 
 
     Angular 是一个 MVVM 前端框架，提供了双向数据绑定。所谓双向数据绑定（Two-way data binding）就是页面元素变化会触发 View-model 中对应数据改变， 反过来 View-model 中数据变化也会引发所绑定的 UI 元素数据更新。操作数据就等同于操作 UI。 
 
 
     
二.知识剖析 
     
     
         脏检查如何触发？ 
         Angular 每一个绑定到UI的数据，就会有一个 $watch 对象。 
         所有的watch存储在$$watchList中，一次脏检查就是调用一次 $apply() 或者 $digest()，遍历检查所有watch，将数据中最新的值呈现在界面上。 
         实际上$apply 其实就是$digest的一个简单封装。 
     
     
         通常写代码时我们无需主动调用 $apply 或 $digest 是因为 angular 在外部对我们的回调函数做了包装。例如常用的 ng-click，这是一个指令（Directive），内部实现则 类似 于 
             
                 
                    DOM.addEventListener('click', function ($scope) {
                        $scope.$apply(() => userCode());
                    });
                 
             
         可以看到：ng-click 帮我们做了 $apply 这个操作。类似的不只是这些事件回调函数，还有 $http、$timeout 等。 
     
     
         脏检查的范围 
         前面说到：angular 会对所有绑定到 UI 上的