vue双向绑定原理

Vue数据绑定原理图

Vue会遍历data中数据，但是一般getter,setter是省略的，除非你深层次研究。废话不多说，在Vue遍历data中的数据的时候，Object.defineProerty会将这些属性转换为getter/setter，而每个组件实例都有Watcher对象，在 组件渲染的过程中把Object.definedProperty转换出来的属性记录为依赖,，然后去传送到组件中读取，最后扔到虚拟DOM上，当data中的数据发生改变时，这时候setter就会出动，前来告诉Watcher，你需要重新计算了，我已经发生变化了，从而使的组件中数据得以更新，这就是响应实现的原理。文章启发来自于X金。

（如有人不知道Object.defineProerty时，请看下边介绍）

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

obj：必需。目标对象 

prop：必需。需定义或修改的属性的名字

descriptor：必需。目标属性所拥有的特性

个人理解

如果此时，还不懂，那么请您亲自操作下，就知道Vue双向数据绑定的原理了，说白了就是在一个对象上边定义一个新属性，然后每次去监听他的内容（用事件去驱动），如果发生改变就改变虚拟DOM，