Object.defineProperty是Vue2响应式核心，通过劫持属性getter/setter实现依赖收集与派发更新；但无法监听新增/删除属性、数组索引赋值及Map/Set等结构，且需递归初始化导致性能开销。

Object.defineProperty 是 Vue 2 响应式系统的核心机制，它通过劫持对象属性的 getter 和 setter，在数据读取和修改时插入依赖收集与更新通知逻辑，从而实现响应式状态。

基础用法：拦截单个属性的读写

直接对一个对象属性调用 Object.defineProperty，可以定义其 get 和 set 行为：

• get 在访问属性时触发，适合做依赖收集（比如记录当前正在执行的渲染函数）
• set 在赋值时触发，适合做值更新、触发视图重渲染或派生计算
• 必须将 configurable: true 和 enumerable: true 设为 true，否则无法被 for...in 遍历或被 Vue 工具检测到

实现简易响应式对象

封装一个 reactive 函数，递归处理对象所有属性：

• 遍历对象自有属性，对每个属性调用 Object.defineProperty
• 在 get 中将当前“活动的 watcher”添加到该属性的依赖列表（Dep）
• 在 set 中更新值后，通知所有依赖该属性的 watcher 执行更新
• 对嵌套对象需递归调用 reactive，确保深层属性也被代理（Vue 2 中对数组和 Set/Map 有额外处理）

关键限制与注意事项

Object.defineProperty 存在天然局限，这也是 Vue 3 改用 Proxy 的主要原因：

• 无法监听对象属性的新增或删除（需用 Vue.set / Vue.delete）
• 对数组索引赋值（arr[0] = x）或修改 length 不会触发 setter，Vue 2 重写了 7 个变异方法（push/pop 等）来弥补
• 只能劫持已存在的属性，初始化后动态添加的属性默认不响应
• 不支持 Map、Set、WeakMap 等原生集合类型

对比 Proxy：为什么 Vue 3 换了方案？

Proxy 可以代理整个对象，拦截更全面的操作：

• 能自然捕获属性新增、删除（set、deleteProperty）、in 检查、遍历（ownKeys）等
• 无需递归初始化所有嵌套属性，首次访问时再代理（懒代理），性能更优
• 支持代理数组索引、length、Symbol 键、甚至内置对象如 Map
• 但 Proxy 不兼容 IE，Object.defineProperty 兼容性更好（IE9+）