如何利用 Proxy 实现支持深度嵌套监听的超轻量级前端双向数据绑定引擎-js教程-PHP中文网

proxy能直接支持深度嵌套监听，但需用weakmap缓存已代理对象避免重复创建和内存泄漏，跳过date/regexp/map/set等非普通对象，并防止循环引用导致栈溢出。

如何利用 proxy 实现支持深度嵌套监听的超轻量级前端双向数据绑定引擎

Proxy 能直接支持深度嵌套监听，但“超轻量级”不等于“无脑递归代理”——关键在避免重复代理、控制递归边界、跳过非对象值。

为什么 `get` 中递归调用 `createReactive` 会出问题

常见写法是：在 get 拦截器里对每个 typeof value === 'object' 的返回值再套一层 Proxy。这看似解决了嵌套监听，实则埋下三类隐患：

每次读取同一嵌套对象（如 state.user）都新建一个 Proxy 实例，内存泄漏风险高
循环引用对象（如 obj.parent = obj）会导致无限递归，栈溢出
原始值（Date、RegExp、Map、Set）被误判为可代理对象，后续 set 失败或静默忽略

用 `WeakMap` 缓存已代理对象，避免重复创建

核心思路：只对未代理过的普通对象（plain object）和数组做一次代理，之后复用。缓存必须用 WeakMap，否则强引用会阻止垃圾回收。

示例关键逻辑：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

const proxyCache = new WeakMap();

function createReactive(target) {
  if (proxyCache.has(target)) return proxyCache.get(target);
  
  // 只代理 plain object 和 array
  if (target !== null && typeof target === 'object' && 
      !target.constructor.prototype.hasOwnProperty('isVue') &&
      !(target instanceof Date || target instanceof RegExp || target instanceof Map || target instanceof Set)) {
    
    const handler = {
      get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver);
        // 仅对 plain object/array 递归代理，且跳过原型链属性
        if (res !== null && typeof res === 'object' && key in target) {
          return createReactive(res);
        }
        return res;
      },
      set(target, key, value, receiver) {
        const oldValue = target[key];
        const result = Reflect.set(target, key, value, receiver);
        if (oldValue !== value) triggerUpdate(key, value);
        return result;
      }
    };
    
    const proxy = new Proxy(target, handler);
    proxyCache.set(target, proxy);
    return proxy;
  }
  
  return target; // 原始值、函数、特殊对象直接返回
}

监听数组时，`push`/`pop` 等方法为何能触发 `set`

数组的变异方法（push、unshift、splice 等）内部会修改索引属性（如 0、1）和 length，这些操作都会命中 set 拦截器。但要注意：

arr[0] = 'x' 触发 set，但 arr.length = 0 也会触发 —— 需在 set 中区分是数据变更还是元信息变更
arr.forEach 或 for...in 不触发 get，因为它们遍历的是自有属性名，不是通过 Reflect.get 访问
若需拦截 map、filter 等非变异方法，得重写数组原型方法，或改用 Proxy 拦截 apply

双向绑定中，`v-model` 类指令如何与 `set` 同步更新视图

真正轻量的关键，是把 DOM 更新逻辑从 Proxy 内部剥离。Proxy 只负责通知“哪个 key 变了”，不关心怎么更新：

绑定时：解析 v-model="user.name" 得到路径数组 ['user', 'name']，用 getNested 取初始值并渲染
输入时：input 事件触发 setNested(state, ['user', 'name'], e.target.value)，最终走到最内层 set 拦截器
set 拦截器只调用 triggerUpdate(key, value)，由外部统一维护一个 effectMap 映射 key → 回调函数列表