vue的数据驱动与数据响应原理

 

数据驱动：DOM是数据的一种天然映射

若是没有ViewModel那么视图和model是怎么样交互的呢？好比咱们经过ajax从后台获取数据，为了让视图改变咱们要手动触发DOM的改变，或者经过前端交互改变数据，为了让视图也发生变化，仍然须要手动触发这些DOM的改变，手动改变DOM是一个繁琐的过程，也比较容易出错，而使用view以后就省去了手动操做DOM变化的步骤了，在vue里，你只须要改变数据，vue.js经过
directive（指令）去对DOM作一层封装，当数据发生变化，会通知指令去修改对应的DOM。数据驱动DOM变化，DOM是数据的一种天然映射。vue.js还会对数据作一些监听，当咱们修改视图的时候，vue.js监听到这些变化，从而改变数据，这样也就造成了数据的双向绑定。

 

 

数据响应原理： 看看数据改变是如何驱动数据自动更新的

　　

加入咱们有一份数据a.b，在一个vue对象实例化的过程当中，会给a.b这份数据经过es5的 Object.defineProperty() 属性，添加了一个Setter和 Getter，同时vue.js会对模板作编译，解析生成一个指令对象，这里是一个v-text指令，
每一个指令对象都会关联一个Watcher，当咱们对指令对应的表达式a.b作求值的时候，就会触发了Getter，这里咱们就会把依赖收集到这个Watcher里面，当我再次改变了a.b的时候，就会触发它的Setter，会通知到被关联的Watcher，而后Watcher就会再次对a.b求值，计算对比新旧值。当发现值改变了，Watcher又会通知到指令，调用指令的Updata方法，因为指令是对DOM的封装，因此会调用原生DOM的方法，去更新视图，这样咱们就完成了数据改变到视图更新的一个自动过程。