Proxy能直接支持深度嵌套监听，但需用WeakMap缓存已代理对象避免重复创建和内存泄漏，跳过Date/RegExp/Map/Set等非普通对象，并防止循环引用导致栈溢出。
Proxy 能直接支持深度嵌套监听，但“超轻量级”不等于“无脑递归代理”——关键在避免重复代理、控制递归边界、跳过非对象值。
为什么 get 中递归调用 createReactive 会出问题
常见写法是：在 get 拦截器里对每个 typeof value === 'object' 的返回值再套一层 Proxy。这看似解决了嵌套监听，实则埋下三类隐患：
- 每次读取同一嵌套对象（如
state.user）都新建一个Proxy实例，内存泄漏风险高 - 循环引用对象（如
obj.parent = obj）会导致无限递归，栈溢出 - 原始值（
Date、RegExp、Map、Set）被误判为可代理对象，后续set失败或静默忽略
用 WeakMap 缓存已代理对象，避免重复创建
核心思路：只对未代理过的普通对象（plain object）和数组做一次代理，之后复用。缓存必须用 WeakMap，否则强引用会阻止垃圾回收。
示例关键逻辑：
立即学习“前端免费学习笔记（深入）”；
FastAPI Flask Proxy
下载
FastAPI + Flask 混合部署最佳实践，解决路由定义、API 代理等常见问题，适用于同时运行 FastAPI API 与 Flask 前端的场景。
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 → 回调函数列表
这样 Proxy 层代码可压缩到 30 行以内，所有业务逻辑（模板编译、DOM 操作、diff）全在外部解耦实现。
深层监听真正难的不是“怎么代理”，而是“什么时候不该代理”——原始值、内置对象、循环引用、高频读取路径，都是缓存和提前退出的信号。轻量，始于克制。
