AngularJs双向绑定原理

一、什么是AngularJS

AngularJS是一个JavaScript框架，它诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

今天这篇文章主要是来理解什么是自动化双向数据绑定以及其实现的方式。

二、什么是数据绑定

首先我们要理解什么是数据绑定。目前我们所看到的网站页面中，基本是由数据和设计两部分组成。将设计转换成浏览器能理解的语言，便是html和css主要做的工作。而将数据显示在页面上，并且有一定的交互效果（比如点击等用户操作及对应的页面反应）则是js主要完成的工作。出于用户体验、数据安全等方面考虑，很多时候我们不会一提交数据就刷新页面（get请求），而是通过向后端请求相关数据，然后通过无刷新加载（ajax）的方式进行页面更新（post请求）。当数据进行更新后，页面上相应的位置也能自动做出对应的修改，这就是数据绑定。可以看出，数据绑定是M(model，数据）通过VM（model-view，数据与页面之间的变换规则）向V（view）的一个修改。

三、什么是双向绑定

所谓的双向绑定，就是从界面的操作能实时反映到数据，也就是数据的变更能够实时展现到界面。

在新的框架中（angualr，react，vue等），通过对数据的监视，一旦数据发生变化，就根据已经写好的规则对页面进行修改，这样便实现了V——M——VM——V的一个双向绑定。

它是相当于增加了一条反向的路，在用户操作页面（比如在Input中输入值）的时候，数据能及时发生变化，并且根据数据的变化，页面的另一处也做出对应的修改。有一个常见的例子就是淘宝中的购物车，在商品数量发生变化的时候，商品价格也能及时变化。

四、双向绑定的实现

AngularJs主要通过scopes模型实现数据双向绑定。AngularJS的scopes包括以下四个主要部分：

• digest循环以及dirty-checking，包括$watch,$digest,和$apply。
• Scope继承 - 这项机制使得我们可以创建scope继承来分享数据和事件。
• 对集合 – 数组和对象 – 的有效dirty-checking。
• 事件系统 - $on，$emit，以及$broadcast。

AngularJs 为 scope 模型上设置了一个 监听队列$watch，用来监听数据变化并更新 view 。每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DOM。

参考文章：https://www.jb51.net/article/129988.htm