如何利用Proxy对象实现数据变化的自动侦听？-js教程-PHP中文网

如何利用Proxy对象实现数据变化的自动侦听？

幻影之瞳

发布： 2025-09-28 14:01:02

原创

359人浏览过

答案：利用Proxy可实现数据自动侦听，通过拦截get和set收集依赖与触发更新，结合递归可深度监听嵌套对象，配合watchEffect等机制构建响应式系统，适用于视图自动更新场景。

如何利用proxy对象实现数据变化的自动侦听？

利用 JavaScript 的 Proxy 对象可以高效实现数据变化的自动侦听。核心思路是通过拦截对象的操作，比如读取和赋值，在关键操作中注入自定义逻辑，从而实现响应式更新。

创建可侦听的响应式对象

使用 Proxy 包装目标对象，拦截其属性的 get 和 set 操作。在 get 中收集依赖（即谁读取了这个值），在 set 中触发更新（通知依赖进行更新）。

示例代码：

function createReactiveObject(target, callback) {
  return new Proxy(target, {
    get(obj, prop) {
      return obj[prop];
    },
    set(obj, prop, value) {
      const oldValue = obj[prop];
      obj[prop] = value;
      // 值发生变化时执行回调
      if (oldValue !== value) {
        callback(prop, value, oldValue);
      }
      return true;
    }
  });
}

登录后复制

调用方式：

const data = { count: 0 };
const reactiveData = createReactiveObject(data, (prop, newValue) => {
  console.log(`${prop} 变更为 ${newValue}`);
});

reactiveData.count = 1; // 输出：count 变更为 1

登录后复制

深度监听嵌套对象

如果对象包含嵌套结构，需要递归地对每个子对象也创建 Proxy，确保深层属性的变化也能被捕获。

改进后的 reactive 函数：

function reactive(target, callback) {
  const handler = {
    get(obj, prop) {
      const value = obj[prop];
      // 对象类型才需要继续代理
      if (value && typeof value === 'object') {
        return reactive(value, callback);
      }
      return value;
    },
    set(obj, prop, value) {
      const oldValue = obj[prop];
      obj[prop] = value;
      if (oldValue !== value) {
        callback(prop, value, oldValue);
      }
      return true;
    }
  };
  return new Proxy(target, handler);
}

登录后复制

这样即使修改 data.user.name 这样的深层属性，也能触发回调。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

应用于简易响应式系统

将 Proxy 与依赖追踪结合，可构建一个简单的响应式系统。例如在视图更新场景中，自动重新渲染使用了响应式数据的函数。

简单实现一个 autorun：

function autorun(fn) {
  // 标记当前正在执行的副作用函数
  const runner = () => {
    runner.active = true;
    fn(); // 执行函数，触发 get 收集依赖
    runner.active = false;
  };
  runner();
}

// 结合 Proxy 使用
let activeEffect = null;

function watchEffect(effect) {
  activeEffect = effect;
  effect(); // 触发读取，收集依赖
  activeEffect = null;
}

登录后复制

虽然完整依赖收集机制还需 WeakMap 等结构优化，但 Proxy 已提供了基础能力。

基本上就这些。Proxy 提供了强大的元编程能力，让数据侦听变得更直观和灵活。只要合理设计拦截逻辑，就能实现高效的自动响应机制。不复杂但容易忽略的是，记得处理数组和对象的特殊情况，比如索引赋值或 length 变化。

以上就是如何利用Proxy对象实现数据变化的自动侦听？的详细内容，更多请关注php中文网其它相关文章！