响应式代理需递归处理嵌套对象并用WeakMap缓存，否则会无限创建Proxy导致内存暴涨；Proxy默认不监听深层属性，因只拦截目标自身属性读写，子对象访问绕过捕获器；正确做法是在get中判断值是否为对象、查缓存、未缓存则递归代理并存入WeakMap；数组和动态属性天然可被set捕获，无需额外拦截；DOM更新应批量延迟至下一帧以避免卡顿。
能实现，但必须在 get 中递归代理嵌套对象，并用 WeakMap 缓存已代理实例；否则会无限创建 Proxy、内存暴涨、页面卡死。
为什么默认不监听深层属性？
Proxy 只拦截目标对象自身属性的读写，不自动处理子对象。比如访问 proxy.user.info.name 时：
-
proxy.user触发一次get，返回的是原始user对象（非 Proxy） - 后续对
user.info.age的赋值完全绕过监听，set捕获器不会触发 - 现象是：修改
state.user.info.age = 26，只捕获到info属性的赋值，age变化无响应
如何正确递归代理并防重复创建？
关键是在 get 返回前判断值是否为对象，并复用缓存：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 用
const proxyCache = new WeakMap()存储已代理对象 - 在
get中先查缓存：if (proxyCache.has(value)) return proxyCache.get(value) - 仅当
value是对象且未缓存时，才调用自身函数新建 Proxy 并存入：proxyCache.set(value, createReactive(value, callback)) - WeakMap 自动随原对象被垃圾回收，比 Map 更安全，避免内存泄漏
如何支持数组和动态属性更新？
数组方法（如 push、pop）本质是设置索引和 length 属性，所以会触发 set 捕获器两次：
立即学习“前端免费学习笔记（深入）”；
-
proxy.arr.push(1)→ 触发set(target, '0', 1)和set(target, 'length', 1) - 无需额外拦截
apply，轻量级方案只需在set中识别数字键或length变更即可感知数组变化 - 动态添加属性（如
proxy.user.location = 'Beijing'）天然被set捕获，无需预定义
DOM 更新怎么避免高频重绘？
用户连续输入时，input 事件会密集触发 set，直接同步操作 DOM 易导致卡顿：
- 不要在
set里立即更新视图，尤其避免“读-写”同步操作（如先改input.value再读textContent） - 推荐用
requestIdleCallback或setTimeout(..., 0)延迟到下一帧执行渲染 - 更稳做法是收集变更字段（如
pendingUpdates.add(key)），批量调用updateView(pendingUpdates)
