Object.defineProperty 是 Vue 2.x 响应式核心，通过劫持 getter/setter 实现依赖收集与更新通知；但无法监听新增/删除属性、数组索引及原生集合，故 Vue 3 改用 Proxy。

Object.defineProperty 是 Vue 2.x 实现响应式数据绑定的底层核心机制，它通过劫持对象属性的 getter/setter，在数据读取和修改时插入依赖收集与更新通知逻辑，从而支撑起 MVVM 中“数据变化自动驱动视图更新”的关键能力。

用 defineProperty 拦截属性读写

Vue 2 的响应式原理本质是对 data 对象的每个属性调用 Object.defineProperty，把普通属性变成“可追踪”的响应式属性。关键在于：在 getter 中收集当前正在执行的 Watcher（即依赖），在 setter 中触发所有已收集的 Watcher 更新。

• setter 中必须判断新旧值是否相等（使用 Object.is），避免无意义的重复触发
• getter 中需确保 Dep.target 存在（即当前有正在求值的 Watcher），才将它加入依赖列表
• 对嵌套对象需要递归处理，否则深层属性修改不会触发更新（这也是 Vue 2 无法检测数组索引直接赋值、对象新增属性的原因）

实现一个极简响应式系统

不依赖 Vue 源码，仅用 defineProperty + 发布订阅模式，就能模拟出核心流程：

• 为 data 创建 Observer 类，遍历所有属性，用 defineProperty 包装；遇到对象则递归 observe
• 每个属性对应一个 Dep（依赖管理器），负责存放依赖它的 Watcher，并提供 addSub / notify 接口
• Watcher 类代表一个“观察者”，如渲染函数或计算属性，在实例化时会把自己设为 Dep.target，触发 data 属性 getter 完成依赖收集
• 当属性被修改，setter 调用 dep.notify()，遍历所有 Watcher 执行 update 方法（比如重新渲染）

为什么 Vue 3 改用 Proxy？

defineProperty 存在几个硬伤，直接限制了 Vue 2 的能力边界：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

• 无法监听对象属性的添加或删除（只能劫持已存在的属性）
• 对数组需重写 push/pop 等 7 个方法才能拦截，不够自然
• 无法代理整个对象，只能逐个定义属性，性能和代码复杂度随属性数上升
• 对 Map/Set/WeakMap 等原生结构完全无能为力

Proxy 可以直接代理整个对象，拦截 get/set/deleteProperty/has/iterate 等 13 种操作，天然支持动态增删、数组索引、Symbol 键和内置集合类型，是更彻底的响应式解决方案。

实际开发中要注意的坑

即使理解原理，手写 defineProperty 仍容易出错：

• 避免在 defineProperty 内部再次触发响应式逻辑（如 setter 中给 this 赋值），可能造成死循环
• 原始值（string/number/boolean）需包装成对象才能响应式，所以 Vue data 必须是函数返回对象
• defineProperty 对于已有属性才有效，Vue.set 就是为了解决新增属性不可响应的问题
• 注意浏览器兼容性：IE9+，且不能用于原型链上的属性劫持