什么是双向绑定
我们先从单向绑定切入,单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新.
双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定.
vue的双向绑定指的是数据变化更新视图，视图变化更新数据。vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。

vue实现双向绑定的方式主要有两种：

1.使用v-model指令，用于表单控件或者在组件上创建双向绑定。v-model指令的作用是使绑定的数据和表单元素的值相互关联。例如：

<div id="app"><input type="text" v-model="text">{{ text }}
</div>
<script>var vm = new Vue({el: '#app',data: {text: 'hello world'}});
</script>

2.使用Object.defineProperty函数，利用访问器属性的get和set方法来劫持对象的属性，在属性值发生变化时我们可以获取变化，并根据变化进行后续响应。例如：

var obj = {};
Object.defineProperty(obj, 'foo', {get: function () {console.log('将要读取obj.foo属性');},set: function (newVal) {console.log('当前值为', newVal);}
});
obj.foo; // 将要读取obj.foo属性
obj.foo = 'name'; // 当前值为 name
</script>

简单说说双向绑定原理：
双向绑定的实现主要依赖于两个技术：数据劫持和发布订阅模式。
数据劫持是指利用Object.defineProperty ()方法对对象的属性进行拦截，可以在属性被访问或修改时执行一些操作，比如通知订阅者。
发布订阅模式是指定义一个订阅器Dep，用来收集和管理订阅者Watcher，每个Watcher都有一个更新函数，当数据变化时，Dep会通知所有的Watcher执行更新函数。
双向绑定还需要一个解析器Compile，用来扫描和解析模板中的指令（如v-model，v-on等），并将节点和数据关联起来，初始化视图和订阅者。
双向绑定的流程大致如下：
创建一个Vue实例，并传入一个选项对象，包含el和data属性。
Vue实例会调用Observer方法对data对象进行数据劫持，给每个属性添加getter和setter方法。
Vue实例会调用Compile方法对el元素进行模板编译，解析指令，并初始化视图。
Compile方法会创建Watcher实例，并将更新函数作为回调传入。
Watcher实例会读取data中对应的属性值，并将自己添加到Dep中。
当用户修改视图中的表单元素时，触发input事件，修改data中对应的属性值。
当data中的属性值被修改时，触发setter方法，通知Dep中的所有Watcher执行更新函数。
Watcher实例会读取最新的属性值，并执行更新函数，更新视图中的内容。
找的网图更加直观