数据双向绑定原理

数据双向绑定

1.AngularJS:

AngularJS 采用“脏值检测”的方式

数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。

如果是手动ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

2.vue

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法,监控对数据的操作，从而可以自动触发数据同步。

并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

Object.defineProperty方法第一个参数是要设置的对象，第二个参数是对象的属性，第三个参数是一个对象，里面有set和get方法,当设置属性值或者获取属性值的时候就会执行这个set.get方法。vue就是通过set方法，做到vue数据变更时，同时渲染页面数据。vue也会给dom对象绑定对象，这样页面数据变更时，也会对应的修改data.