使用Proxy和Reflect实现数据响应式_js高级特性-js教程-PHP中文网

使用Proxy和Reflect实现数据响应式_js高级特性

狼影

发布： 2025-11-01 17:04:02

原创

919人浏览过

答案：通过 Proxy 拦截对象的 get 和 set 操作，在 get 时利用 WeakMap 收集依赖，在 set 时触发依赖更新，结合 Reflect 保证正确行为，实现响应式系统。

使用proxy和reflect实现数据响应式_js高级特性

在 JavaScript 中，实现数据响应式是现代前端框架（如 Vue 3）的核心机制之一。通过 ES6 引入的 Proxy 和 Reflect，我们可以更优雅、更强大地拦截对象操作，从而实现自动追踪依赖和触发更新。下面详细介绍如何使用 Proxy 与 Reflect 实现一个简易但核心逻辑完整的响应式系统。

什么是 Proxy 和 Reflect？

Proxy 可以包装一个对象并拦截其基本操作（如读取、赋值、删除属性等）。它提供了一个“代理”层，允许我们在操作对象时插入自定义逻辑。

Reflect 是一个内置对象，提供了许多与 Proxy 拦截方法对应的操作方法。使用 Reflect 能确保默认行为的一致性，并且写法更简洁、安全。

例如：

const obj = { name: 'Tom' };
const proxy = new Proxy(obj, {
  get(target, key) {
    console.log('访问了', key);
    return Reflect.get(target, key); // 推荐写法
  },
  set(target, key, value) {
    console.log('设置了', key, '为', value);
    return Reflect.set(target, key, value); // 返回布尔值表示是否设置成功
  }
});

登录后复制

当你访问 proxy.name 或设置 proxy.age = 18 时，会自动打印日志，这就为我们实现“响应式”提供了切入点。

实现基础的响应式系统

响应式的核心思想是：当数据被读取时，收集依赖（谁在用这个数据）；当数据被修改时，通知所有依赖进行更新。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

我们用一个简单的例子来实现这个流程：

// 存储依赖的“桶”
const bucket = new WeakMap();

// 当前正在执行的副作用函数（比如渲染函数）
let activeEffect = null;

// 注册副作用函数
function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，触发 getter 收集依赖
}

// 将普通对象变为响应式对象
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      if (activeEffect) {
        // 收集依赖：target -> key -> Set(effect)
        let depsMap = bucket.get(target);
        if (!depsMap) {
          depsMap = new Map();
          bucket.set(target, depsMap);
        }
        let deps = depsMap.get(key);
        if (!deps) {
          deps = new Set();
          depsMap.set(key, deps);
        }
        deps.add(activeEffect);
      }
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      const depsMap = bucket.get(target);
      if (depsMap) {
        const deps = depsMap.get(key);
        if (deps) {
          deps.forEach(fn => fn());
        }
      }
      return result;
    }
  });
}

登录后复制

实际使用示例

现在我们将上述代码组合起来，测试一个简单的响应式更新：

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

effect(() => {
  console.log('count is:', state.count);
});

// 输出：count is: 0

state.count++; 
// 输出：count is: 1

state.count = 5; 
// 输出：count is: 5

登录后复制

每次 count 被修改，都会自动触发 effect 内的函数重新执行，实现了“响应式”效果。