答案：利用Proxy可实现数据自动侦听，通过拦截get和set收集依赖与触发更新，结合递归可深度监听嵌套对象，配合watchEffect等机制构建响应式系统，适用于视图自动更新场景。
利用 JavaScript 的 Proxy 对象可以高效实现数据变化的自动侦听。核心思路是通过拦截对象的操作，比如读取和赋值，在关键操作中注入自定义逻辑，从而实现响应式更新。
创建可侦听的响应式对象
使用 Proxy 包装目标对象，拦截其属性的 get 和 set 操作。在 get 中收集依赖（即谁读取了这个值），在 set 中触发更新（通知依赖进行更新）。
示例代码：function createReactiveObject(target, callback) {
return new Proxy(target, {
get(obj, prop) {
return obj[prop];
},
set(obj, prop, value) {
const oldValue = obj[prop];
obj[prop] = value;
// 值发生变化时执行回调
if (oldValue !== value) {
callback(prop, value, oldValue);
}
return true;
}
});
}
调用方式：
const data = { count: 0 };
const reactiveData = createReactiveObject(data, (prop, newValue) => {
console.log(`${prop} 变更为 ${newValue}`);
});
reactiveData.count = 1; // 输出：count 变更为 1
深度监听嵌套对象
如果对象包含嵌套结构，需要递归地对每个子对象也创建 Proxy，确保深层属性的变化也能被捕获。
改进后的 reactive 函数：function reactive(target, callback) {
const handler = {
get(obj, prop) {
const value = obj[prop];
// 对象类型才需要继续代理
if (value && typeof value === 'object') {
return reactive(value, callback);
}
return value;
},
set(obj, prop, value) {
const oldValue = obj[prop];
obj[prop] = value;
if (oldValue !== value) {
callback(prop, value, oldValue);
}
return true;
}
};
return new Proxy(target, handler);
}
这样即使修改 data.user.name 这样的深层属性，也能触发回调。
应用于简易响应式系统
将 Proxy 与依赖追踪结合，可构建一个简单的响应式系统。例如在视图更新场景中，自动重新渲染使用了响应式数据的函数。
简单实现一个 autorun：function autorun(fn) {
// 标记当前正在执行的副作用函数
const runner = () => {
runner.active = true;
fn(); // 执行函数，触发 get 收集依赖
runner.active = false;
};
runner();
}
// 结合 Proxy 使用
let activeEffect = null;
function watchEffect(effect) {
activeEffect = effect;
effect(); // 触发读取，收集依赖
activeEffect = null;
}
虽然完整依赖收集机制还需 WeakMap 等结构优化，但 Proxy 已提供了基础能力。
基本上就这些。Proxy 提供了强大的元编程能力，让数据侦听变得更直观和灵活。只要合理设计拦截逻辑，就能实现高效的自动响应机制。不复杂但容易忽略的是，记得处理数组和对象的特殊情况，比如索引赋值或 length 变化。
