携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 1 天，点击查看活动详情
vue框架的响应式原理和双向数据绑定特别容易搞混淆，简单看感觉特别像一回事，深入研究之后发现不是的，那有什么区别呢，下面来分别了解一下。
vue的核心就是数据驱动视图，当数据发生更改后，视图也会随之响应更新。
响应式原理的核心是数据劫持（对所有属性的监听）和依赖收集
vue2 和 vue3 的原理都一样，就是 vue2 使用 Object.defineProperty()， 而 vue3 使用 proxy 代理。
vue2（浅响应式）
① 首先会遍历 data，使用 Object.defineProperty() 实现对所有属性（也就是 数据的存取操作）的拦截
② 当用户对视图进行操作时，会触发 set 拦截器
③ set 会先改变当前数据，再通知 watch，watch 去通知视图进行更新
④ 接着视图重绘，再次从 get 中获取对应的数据
vue3 (深响应式)
① 使用 proxy 进行代理，拦截 data 任意属性的任意操作，包括属性的读写、属性的添加、属性的删除等等
② 其次使用 reflect 进行反射，动态的对被代理的对象的相应属性进行特定的操作
③ 代理对象和反射对象必须相互配合才能实现响应式
双向数据绑定
也就是常用到的 v-model 双向数据绑定指令，它就相当于对标签设置 input 事件和动态绑定 value 属性，v-model 可以看作就是一个语法糖。具体来说，将 value 里面的值动态绑定成 data 节点下数据的值，再通过 @input 设置输入事件，在 methods 节点下创建事件处理函数，然后在函数内部将 value 的值传递给data。
v-model === input 事件 + value 属性（动态赋值）
