17370845950

Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，它通过 handler 拦截 get、set、has、deleteProperty 等关键操作，实现响应式系统；相比 Object.defineProperty，Proxy 支持动态属性、数组索引、完整拦截能力且无需预设字段。

Proxy 是 JavaScript 中用于拦截和自定义对象基本操作的构造器，它是实现数据响应式的核心机制之一。 它不修改原对象，而是创建一个“代理”，在访问、赋值、删除等操作发生时插入自定义逻辑——这正是 Vue 3 和许多现代响应式库的底层基础。

Proxy 能拦截哪些关键操作？

通过 handler 对象，你可以捕获对目标对象的各种行为。最常用的是：

• get(target, key, receiver)：读取属性时触发，适合做依赖收集（比如记录谁用到了这个字段）
• set(target, key, value, receiver)：设置属性时触发，适合做更新通知（比如通知视图重新渲染）
• has(target, key)：in 操作符触发，可隐藏或动态控制属性可见性
• deleteProperty(target, key)：delete 操作触发，可用于拦截非法删除

手写一个极简响应式系统（基于 Proxy）

下面是一个能自动触发更新的 reactive 函数，配合 effect 实现依赖追踪：

const depsMap = new WeakMap(); // 存储 {target: Map>}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集当前 effect 依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发所有依赖该 key 的 effect
      return result;
    }
  });
}

function effect(fn) {
  activeEffect = fn;
  fn(); // 执行一次，触发内部的 get 收集依赖
  activeEffect = null;
}

let activeEffect = null;

function track(target, key) {
  if (!activeEffect) return;
  let deps = depsMap.get(target);
  if (!deps) {
    deps = new Map();
    depsMap.set(target, deps);
  }
  let effects = deps.get(key);
  if (!effects) {
    effects = new Set();
    deps.set(key, effects);
  }
  effects.add(activeEffect);
}

function trigger(target, key) {
  const deps = depsMap.get(target)?.get(key);
  if (deps) deps.forEach(fn => fn());
}

使用示例：

const state = reactive({ count: 0 });

effect(() => {
  console.log('count 变了：', state.count); // 初始输出 0
});

state.count++; // 自动触发 effect，输出 "count 变了：1"

为什么 Proxy 比 Object.defineProperty 更适合响应式？

• 支持动态新增/删除属性：defineProperty 必须提前声明所有响应式字段；Proxy 天然监听整个对象，无需预设
• 支持数组索引和 length 变化：defineProperty 对 arr[0] = x 或 arr.push() 无感知；Proxy 的 set 可捕获所有赋值行为
• 可代理整个对象甚至嵌套结构：配合递归 reactive 或 lazy 初始化，轻松实现深层响应式
• 拦截能力更完整：包括 in、for...in、instanceof、函数调用（apply）等，扩展性强

实际使用中的注意事项

• Proxy 返回的是新对象，原对象不受影响，也不具备响应性 —— 务必用代理后的对象
• 不能直接代理原始值（如 number、string），只能代理对象、数组、函数等引用类型
• 注意 this 指向：在 set/get 中若用到 receiver（通常是 proxy 本身），应优先用 Reflect 方法保持语义正确
• 性能敏感场景慎用：过度嵌套或高频触发的 Proxy 可能带来额外开销，合理做惰性代理或跳过只读对象