Proxy 能够监听对象中的对象的引用吗？

问题

Proxy 能够监听对象中的对象的引用吗？

---

不能直接监听。

Proxy 默认只代理对象的一层属性。如果对象的某个属性值本身是另一个对象（嵌套对象），那么对该嵌套对象 内部属性的读写操作，不会触发外层 Proxy 的拦截器（handler）， 因为嵌套对象本身 不是 Proxy，而是原始引用。

示例：

const obj = {
  a: { b: 1 }
};

const proxy = new Proxy(obj, {
  get(target, key) {
    console.log('get', key);
    return target[key];
  },
  set(target, key, value) {
    console.log('set', key, value);
    target[key] = value;
  }
});

proxy.a.b = 2; // 不会触发任何日志！

原因：proxy.a 返回的是原始对象 { b: 1 }，对它的 .b = 2 操作完全绕过了外层 Proxy。

---

如何监听嵌套对象？

必须对每个嵌套对象也创建 Proxy，即实现 深度代理：

function reactive(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  Object.keys(obj).forEach(key => {
    obj[key] = reactive(obj[key]); // 递归代理
  });
  return new Proxy(obj, {
    get(target, key) {
      console.log('get', key);
      return reactive(target[key]); // 返回也需代理
    },
    set(target, key, value) {
      console.log('set', key, value);
      target[key] = reactive(value); // 新值也需代理
      return true;
    }
  });
}

Vue 3 的 reactive() 就是基于这种深度 Proxy 实现的。Vue3 中的响应系统可阅读这里。