一、什么是双向绑定
我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定
二、双向绑定原理
我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成
- 数据层（Model）：应用的数据及业务逻辑
- 视图层（View）：应用的展示效果，各类UI组件
- 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理
理解ViewModel
它的主要职责就是：
- 数据变化后更新视图
- 视图变化后更新数据
当然，它还有两个主要部分组成
- 监听器（Observer）：对所有数据的属性进行监听
- 解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
三、vue2.x实现双向绑定
vue2.x采用的是object.defineProperty
- 通过数据劫持结合发布者订阅者模式的方式来实现的，通过object.defineProperty来劫持各个属性的setter，getter，在数据变化时发布消息给订阅者，触发相应的监听回调来渲染视图。
- Obejct.defineproperty（obj,prop,descriptor）方法，接收三个参数，
- obj(定义其上属性的对象)，
- prop(定义或者修改的属性)，
- description(具体的改动方法)，
就是用这个方法来定义一个值，当使用时我们调用他里面的get方法，当我们给这个属性赋值时，用到他的set方法。
vue2.x具体步骤 第一步： 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给对象的某个值赋值，就会触发setter，那么就可以监听到数据的变化。
第二步： complie解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令的界定绑定到更新函数，添加监听数据的订阅者，一旦数据发生变动，收到通知，更新视图。
第三步： Watcher订阅者是Obejct和compile之间的通信桥梁，主要做的事情就是：
1、在自身实例化的往属性订阅器dep里面添加自己。
2、自身必须有个update方法。
3、待属性变动dep.notice通知时，能调用自身的update方法，并触发compile中绑定的回调
第四步： MVVM作为数据绑定的入口，整合Observe、Compile和Watcher三者，通过Observe来监听自己的model数据变化，通过compile来解析编译模板指令，最终利用watcher搭起observe和Compile之间的通信桥梁，到达数据变化视图更新，视图变化数据更新的效果。
四、vue3.x实现双向绑定
vue3.x采用的是proxy
- proxy：对象用户定义基本操作的自定义行为(比如：属性的查找，复制，函数调用等等)。proxy就像一个拦截器一样，他可以在读取对象的属性，修改对象的属性，获取对象属性列表。他可以阻止对象上的默认行为，然后我们自己去定义这些行为。比如我们通过拦截默认的set方法，在自己定一个set方法添加回调函数。
- target: 要兼容的对象，可以是一个对象，数组,函数等等 handler: 是一个对象，里面包含了可以监听这个对象的行为函数，比如里面的get与set
- const proxy = new Proxy(target,handler)
