1. 说一说vue的响应式原理

答：vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体流程

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

2.vue3的响应式和vue2的区别

答：vue3的响应式不同的是不再通过Object.defineProperty()来给属性添加，而是通过Proxy给添加了一层代理器

不同之处：

1.Proxy是对整个对象的代理，而Object.defineProperty只能代理某个属性。
2.对象上新增属性，Proxy可以监听到，Object.defineProperty不能。
3.数组新增修改，Proxy可以监听到，Object.defineProperty不能。
4.若对象内部属性要全部递归代理，Proxy可以只在调用的时候递归，而Object.definePropery需要一次完成所有递归，性能比Proxy差。
5.Proxy在ie浏览器上存在兼容问题

3.vue的双向绑定

vue中的双向一般都特指v-model,视图改，数据改--数据改，视图也改。

v-model其实就是v-bind：value和v-on:click的语法糖，v-bind是完成了数据绑定，v-on监听input框的变换然后改变对应的data值，一句话表示是绑定数据并且监听数据改变，实现了双向绑定

1. input 输入值后更新data:   首先在页面初始化时候，vue的编译器会编译该html模板文件，将页面上的dom元素遍历生成一个虚拟的dom树。再递归遍历虚拟的dom的每一个节点。当匹配到其是一个元素而非纯文本，则继续遍历每一个属性。   如果遍历到v-model这个属性，则会为这个节点添加一个input事件，当监听从页面输入值的时候，来更新vue实例中的data想对应的属性值。

2. data的属性赋值后更新input的值:   同样初始化vue实例时候，会递归遍历data的每一个属性，并且通过defineProperty来监听每一个属性的get，set方法，从而一旦某个属性重新赋值，则能监听到变化来操作相应的页面控制。