Proxy通过get/set拦截属性读写，实现依赖收集与更新触发；结合WeakMap和effect函数可构建轻量响应式系统，支持深度代理与数组监听，数据变化自动更新DOM。
JavaScript的Proxy对象可以拦截并自定义对象的基本操作，比如读取、赋值、删除属性等。利用这一特性，能实现灵活而强大的数据绑定机制，让数据变化自动触发视图更新，无需依赖框架。
监听属性访问与修改
通过get和set陷阱，Proxy可以捕获对象属性的读写行为。这是实现数据绑定的核心。
当某个属性被修改时，可以在set中通知相关视图进行更新；在get中收集依赖，建立数据与视图之间的关联。
- 创建一个响应式对象包装器，对目标对象的所有属性访问进行代理
- 每次获取属性值时，记录当前正在执行的副作用函数（如渲染函数）
- 每次设置属性时，触发所有依赖该属性的更新函数
实现简单的响应式系统
结合WeakMap和副作用函数（effect），可以构建一个轻量级的响应式系统。
立即学习“Java免费学习笔记（深入）”；
使用WeakMap存储对象及其属性的依赖集合，保证对象可被垃圾回收，避免内存泄漏。
示例代码结构如下：
function reactive(obj) {
return new Proxy(obj, {
get(target, key, receiver) {
track(target, key); // 收集依赖
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
});
}
function effect(fn) {
const effectFn = () => {
cleanup(effectFn);
activeEffect = effectFn;
fn();
};
effectFn.deps = [];
effectFn();
}
深度代理与数组处理
基础Proxy只能代理一层，要实现深层响应，需在get中判断返回值是否为对象，并递归代理。
对于数组，除了set，还需注意push、pop等方法会改变length，应触发对应更新。
- 在get中对对象类型值返回新的proxy实例
- 重写数组的变异方法或监听length变化来捕获数组更新
- 避免无限递归：标记已代理的对象，防止重复代理
与DOM更新结合
将响应式数据与页面元素绑定，数据变化后自动更新指定节点。
可在effect中操作DOM，确保每次数据变更都会重新渲染视图。
例如：
const state = reactive({ count: 0 });
effect(() => {
document.getElementById('counter').textContent = state.count;
});
当state.count++时，页面上的计数器自动刷新。
基本上就这些。用Proxy做数据绑定不复杂但容易忽略细节，比如依赖清理、嵌套对象处理和性能优化。掌握核心机制后，可逐步扩展成小型响应式库。
