我们都知道，MVC（VM）中的单向绑定，是指把Model绑定到View，当我们用JS代码更新Model时，View会自动更新。因此我们可以免去繁杂的DOM操作，只需要进行Model的操作就能实现视图的联动更新。
那什么是双向绑定呢？很简单，就是把Model绑定到View的同时，也把View绑定到Model上，这样做既实现了更新Model来更新View，也可以通过更新View来更新Model数据，比如用户在一个input中输入的数据，可以事实绑定到Model中。
几种实现双向绑定的做法
- 发布者-订阅者模式：即通过sub、pub的方式实现数据和视图的绑定监听，更新数据的做法通常是
vm.set('property', value)，符合这种模式的有backbone.js - 脏值检查：即通过脏值检查的方式比对数据是否有变更，来决定是否更新视图。比较简单的实现方法就是通过
setInterval()定时轮询检测数据变动。Google的Angular便是利用了脏值检查，但Angular是只有在指定的事件触发时才进入脏值检查，如DOM事件（用户输入文本点击按钮等）、XHR相应事件（location）、Timer事件（setTimeout、setInterval）以及执行digest()或apply()
- 数据劫持：也是今天要详细介绍的一种，采用数据劫持结合发布者-订阅者模式的方式，通过
Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue2.0就是用这种模式实现的双向绑定。
官方文档中对其实现响应式的解释
Object.defineProperty()
我们可以先了解一下Object.defineProperty()的用法：
var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
set: function(value){
name = value;
console.log('你取了一个书名叫做' + value);
},
get: function() {
return "《" + name + "》"
}
})
Book.name = 'Weekend'
console.log(Book.name); // 《Weekend》
可见，其语法为：Object.defineProperty(obj, prop, descriptor)
其中，obj为要在其上定义属性的对象，prop是要定义或修改的属性的名称，而descriptor则是将被定义或修改的属性描述符。
descriptor同时具有以下可选值：
get：一个给属性提供getter的方法，如果没有getter则为undefined，当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this不一定是定义该属性的对象。
set：一个给属性提供setter的方法，如果没有setter则为undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
实现步骤
根据以上信息，要实现双向绑定，必须要实现以下几点：
- 实现一个数据监听器（Observer），用来劫持并监听所有属性，如有变动可拿到最新值并通知订阅者。
- 实现一个订阅者（Watcher），可以收到属性的变化通知并执行相应的函数，从而更新视图。
-
**实现一个解析器（Compile），可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
实现流程
Vue2与Vue3中双向绑定的区别
Vue2中利用Object.defineProperty()来劫持data数据的getter和setter操作，使得data在被访问或赋值时，动态地更新绑定的template模块。但Object.defineProperty()有一些缺陷，而这些缺陷在ES6中Proxy可以解决，所以在不久的将来Vue3中将会用Proxy来代替旧方法实现双向绑定。
Object.defineProperty()的缺陷是无法监听数组变化。Vue官方文档中提到，Vue将被侦听的数组的变异方法进行了包裹，所以以下方法也能触发视图更新：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
但是对于vm.items[1] = 1这种操作则无法检测。那么为什么不用Proxy呢？因为IE至今不支持Proxy，所以即使Vue3中使用了Proxy来实现，也依旧会保留Object.defineProperty()的向下兼容方法。
Proxy用法
Proxy是在ES2015，即ES6规范中正式发布，它是浏览器底层实现的一种对象拦截器，原生支持JS数组操作（push、shift、splice等等）。
比如说
const test = [1,2,3,4,5]
const observer = new Proxy(test, {
set: function(obj, prop, value, receiver){
console.log("prop: " + prop + " is changed.");
return Reflect.set(...arguments);
}
})
observer.push(6);
observer[2] = 0;
打印结果为：
prop: 5 is changed.
prop: length is changed.
prop: 2 is changed.
综上，Proxy不需要各种hack技术就可以监听数组变化，而且能自动检测length，除此之外，Proxy还有13种拦截方式，性能也优于Object.defineProperty()
