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磨平；
以上是 Vue中双向数据绑定是如何实现的？ 的全部内容， 来源链接： utcz.com/z/377073.html
