vue的双向绑定的原理是什么？

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过ES5提供的Object.defineProperty()方法来劫持(监视)各个属性的setter,getter，在数据变动的时发布消息给订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

 具体的步骤：
       1.需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上getter和setter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
       2.compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
       3.Watcher订阅者是Observer和compile之间通信桥梁，主要做的事情是：
       - 在自身实例化时往属性订阅器(dep)里面添加自己
       - 自身必须有一个update()的方法
       - 待属性变动dep.notice()通知的时候，能调用自身的update()方法，并触发compile中绑定的回调，则功成身退
       4.MVVM作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，通过compile来编译模板指令，最终利用watcher搭起的observer和compile之间的通信桥梁，达到数据变化---试图更新;视图交互变化(input)-->数据model变更的双向绑定效果

 版本比较： vue是基于依赖收集的双向绑定； 3.0版本之前使用Object.definePropetry,3.0新版使用Proxy

• 1.基于数据劫持/依赖收集 的双向绑定的优点
  • 不需要显示的调用，Vue利用数据劫持+发布订阅，可以直接通知变化并且驱动视图
  • 直接得到精确的变化数据，劫持了属性setter，当属性值改变，我们可以精确的获取变化的内容newValue，不需要额外的diff操作
• 2.Object.defineProperty的缺点
  • 不能监听数组：因为数组没有getter和setter，因为数组长度不确定，如果太长性能负担太大
  • 只能监听属性，而不是整个对象，需要遍历循环属性
  • 只能监听属性变化，不能监听属性的删减
• 3.proxy的好处
  • 可以监听数组
  • 监听整个对象不是属性
  • 13种拦截方法，强大很多
  • 返回新对象而不是直接修改原对象，更符合immutable；
• 4.proxy的缺点
  • 兼容性不好，而且无法用polyfill磨平；