Proxy拦截对象操作，Reflect执行默认行为，二者结合实现响应式系统。通过get收集依赖、set触发更新，并递归代理实现深度响应，构成Vue 3响应式核心机制。
数据响应式是现代前端框架的核心机制之一，Vue 3 就是基于 Proxy 和 Reflect 实现的响应式系统。相比 Vue 2 使用的 Object.defineProperty，Proxy 提供了更强大和灵活的元编程能力。下面我们通过实现一个简易但核心逻辑完整的响应式系统，来深入理解 Proxy 和 Reflect 的实际应用。
什么是 Proxy？
Proxy 可以理解为对象的“代理器”，它允许你拦截并自定义对目标对象的操作，比如读取、赋值、枚举等。你可以把它看作一个中间层，在真正操作对象之前先经过一层处理。
基本语法：const proxy = new Proxy(target, handler);
其中 target 是要代理的原始对象，handler 是一个配置对象，定义了各种拦截行为，例如 get、set、deleteProperty 等。
立即学习“Java免费学习笔记（深入）”；
Reflect 的作用
Reflect 是一个内置对象，提供了一系列静态方法，用于执行默认的对象操作。它的方法名与 Proxy handler 中的方法一一对应。使用 Reflect 可以让代码更规范、更安全地调用默认行为。
比如在 set 拦截中，我们通常会在完成自定义逻辑后，使用 Reflect.set 返回原始行为的结果，这样可以保证操作的一致性和可预测性。
实现基础的响应式系统
我们通过 defineReactive 函数将普通对象变成响应式对象，利用 Proxy 拦截 get 和 set，结合依赖收集与派发更新机制模拟 Vue 的响应式流程。
完整示例代码：
function reactive(target) {
return new Proxy(target, {
get(obj, key, receiver) {
// 收集依赖（这里简化为打印）
console.log(`获取属性: ${String(key)}`);
// 使用 Reflect 正确读取值
return Reflect.get(obj, key, receiver);
},
set(obj, key, value, receiver) {
// 触发更新
const result = Reflect.set(obj, key, value, receiver);
console.log(`设置属性: ${String(key)} = ${value}`);
// 这里可以通知视图更新
return result;
}
});
}
使用方式：
const state = reactive({
count: 0
});
state.count; // 输出：获取属性: count
state.count = 1; // 输出：设置属性: count = 1
深度响应式与嵌套代理
上面的例子只代理了第一层。要实现深层响应，需要在 get 中判断返回值是否为对象，并递归代理。
function reactive(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
return new Proxy(target, {
get(obj, key, receiver) {
console.log(`获取: ${String(key)}`);
// 对返回的对象也进行响应式处理
const res = Reflect.get(obj, key, receiver);
return typeof res === 'object' ? reactive(res) : res;
},
set(obj, key, value, receiver) {
const result = Reflect.set(obj, key, value, receiver);
console.log(`更新: ${String(key)} 为 ${value}`);
return result;
}
});
}
这样就能处理嵌套对象的响应式了：
const state = reactive({
user: {
name: 'Alice'
}
});
state.user.name; // 获取: user → 获取: name
state.user.name = 'Bob'; // 更新: name 为 Bob
总结
Proxy 能监听更多操作（如 in、delete、遍历），而 Reflect 让默认行为更可控，两者结合是现代 JavaScript 响应式系统的基石。通过拦截 get 收集依赖，set 触发更新，我们可以构建出高效的数据驱动机制。虽然真实框架中还涉及 WeakMap 缓存、副作用函数、调度器等复杂设计，但核心原理正是基于这两个 API。
基本上就这些，掌握它们是进阶 JavaScript 必经之路。
