Vue2依靠数据代理和数据劫持共同实现响应式底层API为 Object.defineProperty 。先说下数据代理Vue实例 vm 通过 Object.defineProperty 在自身实例上为 _data 的每一个属性搭建代理给每个代理属性配置 getter 、 setter 代理内部仅做转发读取 vm.xxx 实际取值 vm._data.xxx 赋值 vm.xxx 实际修改 vm._data.xxx 作用是简化书写。然后就是数据劫持Vue实例vm通过Observer这个监视器递归遍历_data对象(含数组)里面的属性再通过Object.difineProperty给每一个属性添加getter和setter方法实现数据劫持Vue2 的响应式基于 Object.defineProperty 因此存在⽆法监听对象新增 / 删除属性、⽆法直接监听数组下标修改的缺陷需要通过 $set 等 API 解决Vue3 改⽤ Proxy 解决了这些问题vue3的响应式原理是通过oroxy代理整个对象并搭配reflect操作源数据页面渲染时执行render函数读取数据触发get进行依赖收集当你修改时触发set执行trigger重新运行render来生成新的dom节点再通过patch的differ算法来进行新旧dom元素对比只更新变化的真实dom实现页面自动更新。Vue3 的响应式原理是通过 Proxy 代理整个对象并搭配 Reflect 操作原始数据。页面渲染时执行 render 函数读取数据触发 get 捕获器完成依赖收集修改数据时触发 set 捕获器调用 trigger 重新执行 render 生成新虚拟节点。随后通过 patch 中的 diff 算法对比新旧虚拟 DOM仅更新发生变化的真实 DOM从而实现页面自动响应更新。