壹 ❀ 引
如果有人问，在angularjs中修改模型数据为何视图会同步更新呢，我想大多数人一定会回答脏检查（Dirty Checking）相关概念。没错，在angularjs中作用域（scope）作为链接控制器（controller）与视图（view）之间的桥梁，除了绑定数据监听事件外，一旦有数据发生改变，scope还兼顾了脏检测更新视图的职责，这是我们宏观的理解。
这就引发了一系列的问题，以点击事件为例，为什么在angularjs中用原生click事件达不到更新视图的效果？ng-click与原生click有何区别？ng-click触发后angularjs又是怎么让视图更新的呢？$digest和$apply这两个眼熟的方法究竟有何作用，两者有什么区别？如果你对于这些问题感兴趣，不妨静下心来读一读本文，那么本文开始。
贰 ❀ angularjs的数据绑定
现在有个需求，当我们点击按钮时需要更新视图中的文本信息，当然不通过angularjs我们使用原生js做法也能轻易实现，像这样：
<div>我的名字是：<span class="name"></span></div>
<button class="btn">click me</button>
let btn = document.querySelector('.btn');
let name = document.querySelector('.name');
btn.onclick = function () {
name.innerHTML = '听风是风';
};但这样做就有两个问题，第一我们不得不操作DOM，第二不便于复用，如果我们希望点击后将name字段更新到DOM不同层级的各种地方，此时获取DOM就尤为复杂了。
而angularjs便提供了一种有效的解决方法---数据绑定，它将我们需要更新的name字段抽离成了一份数据，在使用时你不用关心这份数据与DOM结构的内在联系，你要考虑的仅仅是在何处放置这份数据而已。
同样还是上面的需求，我们使用angularjs就可以这么做：
<body ng-controller="myCtrl as vm">
<div>我的名字是：<span>{{vm.name}}</span></div>
<button class="btn" ng-click="vm.sayName()">click me</button>
</body>
angular.module('myApp', [])
.controller('myCtrl', function () {
let vm = this;
vm.name = '';
vm.sayName = function () {
vm.name = '听风是风';
};
});我们仔细对比这两种实现，js是click事件作为媒介找到对应的DOM并操作DOM，而angularjs通过click事件操作的却只是数据，前者操作DOM后者操作数据。突然想起了事件驱动与数据驱动的概念，也有那么点意思了。
这就比较神奇了，当我们点击按钮，name的值发生了改变，同时视图上也同步进行了刷新，angularjs是如何感知变化，又是怎么通过到视图的呢？这就得介绍$digest循环了。
叁 ❀ 神器的$digest
angularjs的事件循环又称为$digest循环，循环过程中包含了数据的脏检测，准确来说angularjs的脏检测功能是由scope上的$digest()方法实现，这里我们先理解$digest与脏检测的关系。
angularjs中的$digest循环主要包含了$watch列表与$evalAsync列表两个部分，$evalAsync列表先不分析，看到$watch列表大家是不是有点想法了呢？
没错，这里的$watch列表就是一个包含了多个$watch监听的数组，在scope中以$$watchers字段表示。$watch大家都不会陌生，监听一份数据，如果发生改变则执行对应回调，而angularjs便是利用$watch监听了我们需要交互的每份数据，只要发生改变，底层将通知视图进行更新。
说到这大家就纳闷了，我编程中明明没加$watch，哪来的呢？其实在angularjs使用中，无论是表达式{{}}还是ng-bind，凡是与视图上与数据交互的地方angualrjs都会帮你去注册watch监听，我们来看个简单的例子：
<body ng-app="myApp">
<div ng-controller="myCtrl as vm">
纯路人，{{vm.name}}非常{{vm.describe}}
<div ng-bind="vm.age"></div>
</div>
</body>
angular.module('myApp', [])
.controller('myCtrl', function () {
var vm = this;
vm.name = "听风是风";
vm.describe = '帅';
vm.age = 26;
});在这个例子中，我们定义了三个属性，并在视图上与之绑定，查看当前控制器scope属性下的$$watchers属性（这个需要谷歌插件才能查看，插件名 ng-inspect for AngularJS），可以看到类型为Array，数组中包含的三个监听器分别对应我们前面定义的数据。一旦数据发生变化，$watch回调负责更新视图。
一个新的问题就是，angularjs的$watch又是如何感知哪些值发生了变化呢，这就像ng-click能执行代码是依赖了点击行为，毕竟总不能用定时器一直监听吧。
关于这一点就又回到了我们前面提到的$digest循环上了，angularjs在每次调用$scope.$digest()方法都会发起$digest循环，在循环中angularjs会触发$$watchers中的每一个$watch（脏检测），有了触发源$watch要做的就是新旧值对比，以及发生变化后的相应操作了。
OK，到这里我们明白了调用$socpe.$digest()会触发$digest循环，在循环中又会触发所有$watch进行数据对比，也就是我们说的脏检查，以及在数据变更后对视图进行更新。
那么$apply与$digest又有什么联系呢？我们接着说。
肆 ❀ $apply与$digest
在angularjs开发中，大家一定有过这样的经历，如果一段断码明明修改了数据但视图没变化，用$scope.$apply方法包裹代码就能解决该问题。比如我们在前文中click与ng-click的例子，这是为什么？
不卖关子，click之所以无法触发视图更新，这是因为click绑定函数中的函数作用域已经脱离了angularjs的上下文，angularjs的$digest循环无法感知脱离angularjs作用域的数据变化（你变了我不知道）。
使用$apply就能让angularjs执行脏检查的本质其实就是$apply也触发了$digest循环，准确来说，执行$scope.$apply后会调用$rootscope.$digest，所以只要使用了$apply方法，angularjs都 会从根作用域开始遍历每个作用域中的每个$warchers。
相比之下像angularjs中内置的事件比如ng-click都内置了$apply用于触发$digest循环，如果我们依旧使用$apply，angularjs反而会报错告诉你已经启动了$apply，一个简单的例子：
<button class="btn" ng-click="vm.sayName()">click me</button>
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
let vm = this;
vm.name = '';
vm.sayName = function () {
$scope.$apply(function () {
vm.name = '听风是风';
});
};
});OK，打到这里我们知道了$apply方法执行会调用$rootscope.$digest方法，从而启动全新的$digest循环，对所有作用域中的数据进行脏检查。
伍 ❀ 何时使用$apply
在angularjs controller中的任何地方都属于angularjs的上下文，在这个上下文中直接修改变量都不需要$apply，但如果你在普通函数以及非angularjs提供的回调函数中修改变量，此时都需要结合$apply来通知angularjs进行额外的脏检查。举几个例子：
1.普通事件绑定的函数内修改数据需要使用$apply，文章开头已有举例。
2.普通定时器回调中修改数据需要使用$apply，一般推荐使用angularjs封装的定时器，比如$timeout：
//angularjs定时器
$timeout(() => vm.name = '听风是风', 1000);
//普通定时器
setTimeout(() => {
$scope.$apply(() => vm.name = '时间跳跃');
}, 2000);
在上文中我们已经说了，如果调用了$apply 等同于$rootscope.$digest，这样性能其实是不太好的，特别是存在多个scope的情况下，我们往往更喜欢只检测当前作用域的数据变化。
更加优化的做法是在当前作用域调用$digest，像这样：
setTimeout(() => {
$scope.$apply(() => vm.name = '时间跳跃');
}, 1000);
setTimeout(function () {
vm.name = '听风是风';
$scope.$digest();
}, 2000);陆 ❀ 总
那么到这里，我们详细介绍了$digest与$apply方法的区别，在介绍$digest循环后了解到$digest是由$apply触发，从而也解释了ng-click与普通click的区别。在介绍了$apply后，我们简单提及了使用$apply的场景，我们知道它会让angualrjs从根作用域开始脏检测，代价较大，因此推荐使用$digest可代替。那么到这里，本文结束。
参考
理解Angular中的$apply()以及$digest()
angularjs权威指南