数据响应机制（angularJs、vue）

[JTangming]

angular的数据响应机制

主要了解 $watch、$digest、$apply

• $watch 绑定要检查的值，即当一个作用域创建的时候，angularJs 会根据如插值，内置指令和 $watch 建立绑定关系。当 $watch 绑定了要检查的属性之后，当绑定的属性发生变化，就会执行回调函数。回调函数的作用是如果新值和旧值不同时（或相同时）要干什么事，通常给开发来实现这个 callback。
• $digest 遍历递归，主要是解决数据绑定发生变化后，如何触发更新的问题。脏检查的核心，就是 $digest 循环。$watch 将相关绑定关系的属性推到 $$watchers 队列中，$digest 触发后就去检测哪些 $scope 属性发生变化，通过 dirty 进行标记，以此完成页面的渲染。
• $apply 触发 $digest（非必须，即业务中手动触发）。angularJs 内部怎么触发 $digest？根据双向绑定关系，将插值、内置指令封装了 $apply，当插值或者内置指令被执行的时候，内部手动执行了 $apply。即如 ng-click 它其实包含了document.addEventListener('click')和$scope.$apply()。

参考下图：