如何用 Proxy 实现一个具备“深度监听”能力的响应式对象以驱动简单的 UI 更新-js教程-PHP中文网

Proxy 默认只代理目标对象本身，不自动递归代理嵌套对象，因此深层属性修改无拦截、无依赖收集、UI不更新。

如何用 proxy 实现一个具备“深度监听”能力的响应式对象以驱动简单的 ui 更新

Proxy 本身不自动深度代理嵌套对象，必须手动递归处理；否则只监听第一层属性，深层修改完全静默。

为什么 `new Proxy(obj, handler)` 默认不响应深层属性变化

Proxy 只代理目标对象本身，不自动代理其内部的子对象或数组。当你访问 state.user.profile.name 时，profile 和 name 都是原生对象/原始值，没被任何 Proxy 包裹，get 拦截器根本不会触发。

常见错误现象：

修改 state.user.profile.name = 'Alice'，控制台无 更新属性: name = Alice 输出
UI 不刷新，因为 track 没在 profile.name 上建立依赖

解决思路：在 get 拦截中，对返回值是对象（且非 null、非 Date/RegExp 等原生类型）的，主动用 reactive 再包一层。

如何在 `get` 中安全递归代理子对象

关键不是“一上来就全递归”，而是“按需代理”——只在属性被读取且值为普通对象时，才创建子 Proxy。这样避免初始化开销，也防止循环引用爆栈。

实操建议：

用 WeakMap 缓存已代理过的对象，避免重复代理同一对象
判断是否需要代理：用 typeof value === 'object' && value !== null && !value.__v_isReactive（加个标记防死循环）
对 Array、Map、Set 等内置类型，Vue 3 是单独处理的；简易版可先只处理 plain object

示例片段：

Nginx Reverse Proxy

配置 Nginx 反向代理，实现域名绑定。用户说“绑定域名”“配置 Nginx”“反向代理”时触发，将域名绑定到指定 IP:端口。

下载

const reactiveMap = new WeakMap()

function reactive(obj) {
  if (obj && obj.__v_isReactive) return obj
  if (!obj || typeof obj !== 'object') return obj

  if (reactiveMap.has(obj)) return reactiveMap.get(obj)

  const handler = {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver)
      // 仅对普通对象做递归代理
      if (typeof res === 'object' && res !== null && !res.__v_isReactive) {
        return reactive(res)
      }
      return res
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, reactive(value), receiver)
      console.log(`更新属性: ${key} =`, value)
      return result
    }
  }

  const proxy = new Proxy(obj, handler)
  obj.__v_isReactive = true
  reactiveMap.set(obj, proxy)
  return proxy
}