Object.defineProperty 无法监听新增或删除属性，仅能拦截已声明属性的读写；Proxy 可全面拦截包括新增、删除、遍历等操作，但需递归处理嵌套对象并注意数组边界与兼容性。
Object.defineProperty 无法监听新增或删除属性
直接用 Object.defineProperty 给已有对象添加 getter/setter，只能拦截已声明的属性读写，对后续 obj.newProp = 1 或 delete obj.existing 完全无感知。这是最常踩的坑——以为设了 setter 就万事大吉，结果新增字段根本触发不了。
- 必须提前定义所有需要响应的属性（哪怕初始值为
undefined） - 无法监听数组索引赋值（如
arr[0] = 'x'）和length变更 - 不支持嵌套对象自动递归代理，需手动对子对象再次调用
defineProperty - Vue 2 的响应式就是基于此实现，所以有
Vue.set和vm.$set来兜底新增属性
Proxy 可以拦截新增、删除、遍历等全部操作
Proxy 是现代标准方案，能真正实现“对象级”监听，包括 in、for...in、Object.keys、delete、has 等行为。但要注意它只代理第一层，深层嵌套仍需递归创建子 Proxy。
const handler = {
set(obj, key, value) {
console.log(`设置 ${key} =`, value);
obj[key] = value;
return true;
},
deleteProperty(obj, key) {
console.log(`删除 ${key}`);
return delete obj[key];
}
};
const observed = new Proxy({ a: 1 }, handler);
observed.b = 2; // ✅ 触发 set
delete observed.a; // ✅ 触发 deleteProperty
-
Proxy返回的是新对象，原对象不受影响，不能直接修改原引用 - IE 完全不支持，需确认运行环境（Node.js ≥ 6.0，浏览器需排除 IE）
- 对数组索引赋值、
push、pop等方法默认不触发set，需在set中额外判断key是否为有效数字索引
WeakMap 缓存用于避免循环引用和内存泄漏
实现深度响应式时，如果每次访问属性都新建 Proxy，同一对象可能被重复代理，且无法清理。用 WeakMap 以原对象为键缓存其代理实例，既避免强引用阻止 GC，又能复用已有代理。
const proxyCache = new WeakMap();
function reactive(obj) {
if (proxyCache.has(obj)) return proxyCache.get(obj);
const handler = {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
// 仅对对象类型递归代理，跳过 null、原始值、函数等
if (res && typeof res === 'object' && !Array.isArray(res)) {
return reactive(res);
}
return res;
}
};
const proxy = new Proxy(obj, handler);
proxyCache.set(obj, proxy);
return proxy;
}
-
WeakMap键必须是对象，不可用字符串或数字 - 不能遍历
WeakMap，也不暴露其大小，适合做内部缓存而非状态管理 - 若对象被外部丢弃（无其他引用），对应缓存条目会自动回收
使用 Object.observe 已被废弃，不要尝试
Object.observe 是早期 Chrome 实验性 API，2016 年已被正式移除，所有现代环境均不可用。控制台执行会直接报 TypeError: Object.observe is not a function。别在 Stack Overflow 老帖里翻到就照抄。
立即学习“Java免费学习笔记（深入）”；
- MDN 明确标注为 Deprecated
- 没有 polyfill，也无法通过 Babel 转译恢复
- 替代方案只有
Proxy（现代环境）或defineProperty+ 手动补漏（兼容旧环境）
