Vue中双向数据绑定是如何实现的？_vue 是如何实现双向数据绑定的

1.原理

• View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
• Vue采用数据劫持&发布-订阅模式的方式，通过ES5提供的Object.defineProperty() 方法来劫持 （监控） 各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的试图，而不是对所有的数据都执行一次检测。要实现Vue中的双向数据绑定，大 致 可 以 划 分 三 个 模 块：Observer、Compile、Watcher，如图：
  
• Observer 数据监听器，负责对数据对象的所有属性进行监听（数据劫持），监听到数据发生变化后通知订阅者。
• Compile 指令解析器，扫描模板，并对指令进行解析，然后绑定指定事件。
• Watcher 订阅者，关联Observer和Complie，能够订阅并收到属性变动的通知，执行指令绑定的相应操作，更新视图。Updade()是它自身的一个方法，用于执行Compile中绑定的回调，更新视图。

2.版本比较

vue是基于依赖收集的双向绑定；
3.0之前的版本使用 Object。defineProperty，3.0新版本使用Proxy

1） 基于 数据劫持/依赖收集 双向绑定的优点

• 不需要显示的调用，Vue利用数据劫持+发布订阅，可以直接通知变化并且驱动试图
• 直接得到精确的变化数据，劫持了属性setter，当属性值改变我们可以精确的获取变化的 newVal，不需要额外的 diff 操作

2）object。defineProperty的缺点

• 不能监听数组； 因为数组没有getter和setter，因为数组长度不确定。如果太长性能负担太大。
• 只能监听属性，而不是整个对象；需要遍历属性；
• 只能监听属性变化，不能监听属性的删减；

3）proxy好处

• 可以监听数组；
• 监听整个对象不是属性
• 13种拦截方法，强的很多；
• 返回新对象而不是世界修改元对象，更符合immutable；

4）proxy缺点

• 兼容性不好，且无法用polyfill磨平；