Proxy是现代JavaScript数据绑定的核心，能拦截多种操作并支持深度代理、依赖收集与DOM双向绑定。
Proxy 是数据绑定的现代基石
JavaScript 本身不提供原生数据绑定，Proxy 是目前最合理、最灵活的实现基础。它能拦截 get、set、has、deleteProperty、ownKeys 等操作，支持动态属性添加、数组索引赋值（如 arr[0] = 'x'）、in 检测等 defineProperty 无法覆盖的场景。Vue 3 的响应式系统正是基于 Proxy 构建，说明其工程成熟度和扩展性已被大规模验证。
必须处理嵌套对象的深度代理
Proxy 默认只代理第一层，深层对象变更不会触发响应。比如 state.user.profile.name = 'Alice' 中，若 profile 未被代理，name 的修改将静默失效。
- 在
get拦截器中判断返回值是否为对象或数组，是则递归调用reactive()并返回新代理 - 对数组需额外注意：原生方法如
push、pop可被拦截，但length = 0或直接索引赋值也需支持 - 避免重复代理：检查目标是否已是 Proxy 实例（可用
target instanceof Proxy或Proxy.revocable辅助判断），防止无限递归
依赖收集与副作用触发要解耦清晰
真正的响应式不是“一改就刷 DOM”，而是建立数据与函数之间的映射关系。核心在于：读取时收集当前执行的副作用（如渲染函数），修改时触发所有关联副作用。
- 用
WeakMap存储对象 →Map（key: 属性名 →Set（effect 函数））结构，避免内存泄漏 - 设置全局
activeEffect标记当前正在运行的副作用，在get中自动加入对应依赖集 -
set中触发更新前，先执行依赖清理（cleanup），防止残留无效 effect
DOM 绑定需兼顾初始化与事件同步
双向绑定 = 数据驱动视图 + 视图反向更新数据。仅靠 Proxy 拦截 set 不够，还需绑定用户输入事件。
立即学习“Java免费学习笔记（深入）”；
- 初始化时用数据渲染表单控件（
input.value = proxy.message） - 监听
input或change事件，把用户输入写回代理对象（proxy.message = e.target.value） - 注意避免循环：DOM 更新不要再次触发 input 事件；可加防抖或标记位控制
- 对
checkbox、select等控件，需按类型适配e.target.checked或e.target.value
