Vue响应式原理核心是版本设计取舍：Vue 2用Object.defineProperty实现属性级劫持，受限于ES5，无法监听新增/删除属性及数组索引赋值；Vue 3用Proxy实现对象级代理，支持全语义拦截、懒代理和原生数组操作，但有trap函数开销，故提供shallowRef和markRaw优化性能。
Vue 的响应式数据原理，核心不是“用 defineProperty 还是 Proxy”，而是“不同版本的设计取舍”：Vue 2 用 Object.defineProperty，Vue 3 全面转向 Proxy。这不是简单的语法升级，而是响应式范式的重构。
为什么 Vue 2 必须用 defineProperty？
受限于 ES5 环境，Vue 2 只能靠属性级劫持实现响应式：
- 对 data 中每个属性单独调用
Object.defineProperty，手动添加 getter/setter - 初始化时必须递归遍历所有嵌套对象和数组，提前把深层属性也定义好
- 无法监听新增属性（如
obj.newKey = 1）、删除属性（delete obj.key）、in操作、for...in、Object.keys()等 - 数组的索引赋值（
arr[0] = x）和 length 修改不触发更新，需重写 7 个变异方法来兜底
Vue 3 为什么必须换 Proxy？
Proxy 是对象级代理，天然支持全语义拦截，解决了 defineProperty 的根本性短板：
- 只需一层代理包装顶层对象，内部嵌套对象在首次访问时才递归 reactive（懒代理），首屏更快、内存更省
- 原生支持新增/删除属性、
in、delete、Reflect.ownKeys()、for...of数组遍历等全部操作 - 无需特殊处理数组——
arr[100] = 'x'、arr.length = 0都能精确触发更新 - 配合
Reflect实现更安全、更一致的底层操作，比如Reflect.get(target, key, receiver)能正确处理原型链和 this 绑定
Proxy 真的没有代价吗？
它更强大，但不是零成本：
立即学习“前端免费学习笔记（深入）”；
- 每次属性读写都要经过 JS 层 trap 函数（如
get(target, key)），有函数调用开销 - 而 defineProperty 的 getter/setter 是引擎内建机制，V8 等可做内联优化，在高频场景（如 Canvas 动画帧循环）中反而更轻量
- 所以 Vue 3 提供了
shallowRef和markRaw：对不需要深层响应的大对象或第三方实例（如 Three.js 场景、Canvas context），跳过 Proxy 包裹，避免 trap 拖累性能
实际开发中该怎么选？
你不用“选”，版本决定了底层：
- 维护 Vue 2 项目，就得接受 defineProperty 的限制，动态加属性必须用
Vue.set或this.$set - 新项目用 Vue 3，直接享受 Proxy 带来的直觉写法：
state.obj.newKey = 'v'、delete state.obj.key都自动响应 - 遇到性能敏感场景（如万级数据表格、实时渲染），优先用
shallowRef或markRaw控制响应式边界
