记得自己曾经实习面试的时候，很长一段时间对面试官提问的vue双向绑定原理、vue响应式原理混为一谈，统一回答，最近重拾面试题的时候，发现了这个问题，重新整理一下
双向绑定
在使用上，大家肯定第一反应就是v-model，所以就以此来展开讲，
首先介绍一下MVVM模式，分为数据层M 视图层 v 业务逻辑层vm
- 数据层（Model）：应用的数据及业务逻辑
- 视图层（View）：应用的展示效果，各类UI组件
- 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来
而业务逻辑层vm介绍实现双向绑定原理的关键，它的主要职责就是：
- 数据变化后更新视图
- 视图变化后更新数据
而在vue中实现双向绑定就是通过v-model，而具体如何实现就是vue的响应式系统
这里再引入讲vue的响应式系统
响应式原理
Vue采用的是数据劫持结合发布和-订阅者模式的方式（这个一定要说，之前遇见过面试官会着重强调这个点），通过拦截对数据的操作，在数据变动时发 布消息给订阅者，触发相应的监听回调。而vue2和vue3实现数据劫持的原理是不一样的。
vue2数据劫持
vue2通过Object.defineProperty对data上的数据递归地进行getter和setter操作，在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。也就是对属性的读取、修改进行拦截（数据劫持）
vue3数据劫持
vue3通过Proxy对象创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。Proxy的监听是深层次的，监听整个对象，而不是某个属性。
发布和-订阅者模式
在vue的业务逻辑层vm（如过只问响应式原理，可以重新介绍一下mvvm模型）有两个主要组成部分：监听器observe 解析器compliler，再细分还有属性订阅器（dep）订阅者(Watcher):
详细过程
- 1.首先监听器observe中对data进行响应式处理，绑定上getter，setter，能够监听的数据的变化，同时每个数据生成一个dep属性订阅器用来管理订阅者watcher，因为可能一个数据可能在一个视图中出现多次
- 2、同时解析器complie解析指令，将模板中的变量替换成数据，然后初始化渲染页面视图，而且将每个指令绑定更新函数，并且添加监听数据的订阅者watcher，
- 3、所以这时，data数据发生变化时，会通过dep属性订阅器通知订阅者watcher，而watcher会触发解析器中的更新函数
总结
如果问双向绑定原理，以上内容都可以回答，先讲双向绑定再讲响应式原理，问响应式原理可以直接介绍响应式原理即可，本文是整理如何面试回答较为浅显，如果想更一步了解可以参考这位大佬文章
