在前端开发中，数据监听 是实现响应式系统的核心技术（比如 Vue 框架的响应式原理）。在 ES6 出现之前，Object.defineProperty 是数据劫持的主流方案；而 ES6 带来的 Proxy 凭借更强大的能力，成为了现代前端框架（Vue3）的新选择。
本文将带你从零认识 Proxy，并详细对比它与 Object.defineProperty 的核心区别，帮你彻底掌握这两个关键 API。
一、什么是 Proxy？
1. 核心定义
Proxy 是 ES6 新增的代理对象 ，字面意思就是「代理」。它可以创建一个目标对象的代理实例，我们对代理实例的所有操作（读取、修改、删除属性等），都会被 Proxy 拦截，我们可以自定义处理逻辑，实现对目标对象的全方位监听。
简单理解：Proxy 就像对象的「经纪人」，你不直接接触对象本身，所有交互都通过经纪人完成，经纪人可以全权管控所有操作。
2. 基础语法
javascript
运行
// 语法：new Proxy(target, handler)
const target = {}; // 目标对象：被代理的原始对象
const handler = {}; // 处理器对象：定义拦截行为
const proxy = new Proxy(target, handler);target：需要被代理的目标对象（可以是对象、数组、函数等）handler：一个配置对象，里面编写各种拦截方法（如 get、set、deleteProperty 等）proxy：生成的代理实例，操作代理实例即可触发拦截逻辑
3. 基础使用示例
javascript
运行
// 目标对象
const user = { name: "张三", age: 20 };
// 创建Proxy代理
const userProxy = new Proxy(user, {
// 拦截属性读取操作
get(target, property) {
console.log(`读取了属性：${property}`);
return target[property];
},
// 拦截属性修改操作
set(target, property, value) {
console.log(`修改了属性：${property}，新值：${value}`);
target[property] = value;
return true; // set必须返回布尔值，表示修改成功
},
});
// 测试：操作代理实例
console.log(userProxy.name); // 读取属性：name → 输出 张三
userProxy.age = 21; // 修改属性：age，新值：21执行代码后，我们能清晰看到所有操作都被 Proxy 拦截并打印日志，这就是最基础的数据监听。
二、回顾：Object.defineProperty
在 Proxy 诞生前，Object.defineProperty 是 ES5 提供的 API，用于劫持对象的单个属性，监听属性的读取和修改。
1. 基础语法
javascript
运行
Object.defineProperty(目标对象, 属性名, {
get() {}, // 读取拦截
set() {} // 修改拦截
})2. 基础使用示例
javascript
运行
const user = {};
// 单独劫持name属性
Object.defineProperty(user, "name", {
get() {
console.log("读取name属性");
return this._name;
},
set(value) {
console.log("修改name属性");
this._name = value;
},
});
user.name = "李四"; // 触发set
console.log(user.name); // 触发get缺陷 ：它只能监听单个属性，如果对象有多个属性，必须循环遍历劫持；无法监听新增属性、数组操作等。
三、Proxy 与 Object.defineProperty 核心区别（重点）
这是面试高频考点，也是实际开发中选择技术方案的关键，我们从能力、用法、性能、兼容性四个维度对比：
1. 监听范围不同（最核心区别）
- Object.defineProperty ：只能监听对象的单个属性，必须遍历对象所有属性才能完成全监听；无法直接监听数组。
- Proxy ：监听整个对象 / 数组，无需遍历，一次性代理全部操作，天然支持数组监听。
2. 支持的拦截操作数量不同
- Object.defineProperty ：仅支持
get（读取）和set（修改）两种拦截。 - Proxy ：支持13 种拦截操作 ，覆盖所有对象操作：
get/set/deleteProperty（删除属性）、has（in 操作符）、apply（函数调用）、construct（new 操作）等。
3. 对新增属性的支持不同
- Object.defineProperty ：无法监听新增属性 。例如：
user.address = "北京"，新增的 address 属性不会被劫持，Vue2 中必须用$set手动处理。 - Proxy ：天然支持监听新增属性，无需任何额外处理。
4. 对数组的支持不同
- Object.defineProperty：无法监听数组的原生方法（push/pop/shift 等）和下标修改。Vue2 只能重写数组方法来实现监听，有局限性。
- Proxy ：直接监听所有数组操作，下标修改、push、pop 等全部能拦截。
5. 操作方式不同
- Object.defineProperty ：直接修改原对象，入侵性强。
- Proxy ：生成代理对象，不修改原对象，无入侵性，符合编程规范。
6. 性能与兼容性
- 性能：Proxy 性能更优，尤其是复杂对象 / 大数据量场景，无需循环遍历属性。
- 兼容性 ：
Object.defineProperty：支持所有浏览器（包括 IE8+）。Proxy：ES6 新特性，不支持 IE，无法通过 polyfill 完全兼容。
四、完整代码对比
1. Object.defineProperty 监听对象
javascript
运行
// 缺点：必须循环遍历，无法监听新增属性
const user = { name: "张三", age: 20 };
// 循环劫持所有属性
Object.keys(user).forEach(key => {
let value = user[key];
Object.defineProperty(user, key, {
get() {
console.log(`读取${key}`);
return value;
},
set(newVal) {
console.log(`修改${key}：${newVal}`);
value = newVal;
},
});
});
user.age = 21; // 可监听
user.address = "北京"; // 新增属性，无法监听2. Proxy 监听对象
javascript
运行
// 优点：无需遍历，支持新增属性
const user = { name: "张三", age: 20 };
const proxy = new Proxy(user, {
get(target, key) {
console.log(`读取${key}`);
return target[key];
},
set(target, key, value) {
console.log(`修改${key}：${value}`);
target[key] = value;
return true;
},
});
proxy.age = 21; // 可监听
proxy.address = "北京"; // 新增属性，正常监听！五、实际应用场景
- Vue3 响应式系统：全面使用 Proxy 替代 Object.defineProperty，解决了 Vue2 的所有痛点。
- 数据校验：拦截属性修改，校验数据格式（如年龄不能为负数）。
- 日志记录：统一记录对象的所有操作，方便调试。
- 表单验证：实时监听表单数据变化，自动校验。
- 虚拟 DOM、状态管理：高级框架中的核心工具。
六、总结
- Proxy 是 ES6 的代理对象，能全方位监听整个对象 / 数组，支持 13 种拦截操作，功能强大、无入侵性，是现代开发首选。
- Object.defineProperty 是 ES5 的属性劫持 API，仅能监听单个属性，不支持新增属性和数组，兼容性好但能力有限。
- 核心选择依据：现代项目（Vue3）用 Proxy，兼容 IE 的旧项目用 Object.defineProperty。
掌握 Proxy，不仅能轻松应对面试，更能理解现代前端框架的底层原理，提升代码设计能力！
总结
- Proxy 是 ES6 代理对象，可全方位监听整个对象 / 数组，支持 13 种拦截操作，无入侵性、性能更优，是 Vue3 的核心技术。
- Object.defineProperty 仅能劫持单个属性，不支持新增属性和数组，兼容性好但功能受限（Vue2 使用）。
- 现代开发优先选择Proxy ，仅需兼容 IE 时使用
Object.defineProperty