一、Vue2 核心底层原理1.1 响应式原理Object.definePropertyVue2 的核心底层逻辑围绕「响应式系统」「虚拟 DOM」「模板编译」三大支柱展开其中响应式是最核心的基石。Vue2 通过Object.defineProperty劫持对象的属性读取/修改操作实现数据响应式。核心步骤如下数据劫持遍历data中的所有属性用Object.defineProperty为每个属性添加getter/setter。依赖收集当组件渲染时会触发属性的getter此时将当前组件的「Watcher监听器」收集到该属性的「依赖池Dep」中。派发更新当属性被修改时触发setter通知依赖池中的所有 Watcher 执行更新重新渲染组件。1.2 极简版 Vue2 响应式手写理解核心下面是一段高度简化的核心逻辑帮你彻底理解“依赖收集”与“派发更新”1.3 Vue2 响应式的局限性与常考坑点面试小贴士当面试官问“Vue2 有什么坑”时下面这三点新增/删除属性无效只能劫持已有属性新增/删除属性无法触发更新必须用Vue.set/Vue.delete。数组索引修改无效对数组的劫持是「重写原型方法」push、pop等arr[0] 1无法触发更新。性能问题嵌套对象需要递归劫持初始化性能随数据复杂度下降。二、Vue3 核心底层原理面试提分点2.1 响应式原理Proxy ReflectVue3 放弃Object.defineProperty改用Proxy代理整个对象而非单个属性结合Reflect保证操作的规范性。核心步骤对象代理用Proxy包裹目标对象拦截所有属性的读取/修改/新增/删除等操作。依赖收集读取属性时get拦截收集依赖。派发更新修改或删除属性时set/deleteProperty拦截触发更新。2.2 极简版 Vue3 响应式手写2.3 Vue3 的编译优化与 Composition API虚拟DOM重写引入PatchFlags补丁标记只对比有变化的节点减少无效对比。编译优化静态提升Static Hoisting将静态节点提到渲染函数外缓存事件处理函数。组合式 API基于闭包实现逻辑按功能聚合解决 Vue2 中 Mixin 的命名冲突和来源不明问题。三、Vue2 vs Vue3 核心维度对比维度Vue2Vue3响应式实现​Object.defineProperty属性级Proxy对象级Reflect响应式能力​仅支持已有属性数组需重写方法支持新增/删除属性、数组索引、Map/Set 等虚拟DOM​基础 diff 算法带 PatchFlags 的精准 diff编译优化​无静态提升、无补丁标记静态提升、PatchFlags、缓存事件API设计​Options API选项式Composition API组合式 保留 OptionsTypeScript支持​弱需手动声明原生支持类型推断、精准校验体积​约 33KB运行时约 10KB按需引入Tree-shaking性能​初始化慢更新效率一般初始化快 30%更新效率提升 50%生命周期​beforeCreate/created等setup替代前两者其余加on前缀生态​Vuex 3/4、Vue Router 3Pinia、Vue Router 4、Vite兼容性​支持 IE11仅支持现代浏览器不兼容 IE四、Vue2和Vue3各自的优势与选型建议Vue2 的核心优势兼容性极佳是需要支持 IE11 等老旧浏览器项目的唯一选择。学习成本低Options API 按data、methods、computed分类新手易上手。生态稳定大量成熟组件库如 ElementUI和教程适合维护老项目。Vue3 的核心优势性能更优响应式、编译、虚拟DOM 全链路优化内存占用更少。逻辑复用灵活useXxx组合式函数跨组件复用无压力。TypeScript 友好大型项目可维护性大幅提升。扩展性更强支持自定义渲染器如 Vue Native、Vue Canvas。开发体验好配合 Vite 实现秒级启动/热更新。五、最爱追问的 3 个加分项Vue2 中$set的原理是什么答Vue2 中$set内部会判断目标是数组还是对象。如果是数组调用重写的splice方法触发响应式如果是对象调用defineReactive重新定义属性并手动触发依赖更新。Vue3 为什么不使用Object.defineProperty答因为Object.defineProperty只能劫持单个属性无法监听新增/删除且对数组支持不友好。而Proxy可以代理整个对象天然支持所有操作且性能更好懒代理。Proxy 的缺点是什么Vue3 怎么解决的答Proxy 不兼容 IE11。Vue3 官方明确放弃 IE 支持拥抱现代浏览器对于需要兼容的老项目只能继续使用 Vue2。总结响应式是核心差异Vue2 基于Object.defineProperty属性级劫持Vue3 基于Proxy对象级代理后者能力更完整。性能与灵活性Vue3 通过编译优化、虚拟DOM重写、组合式API在性能和逻辑复用性上全面超越 Vue2。面试口诀Vue2 靠劫持属性Vue3 靠代理对象Vue2 选项式分散Vue3 组合式聚合。