Object.defineProperty 不能监听数组下标变化，因其仅劫持已存在属性，而数组索引是元素位置且 push/pop 等方法绕过 setter；Vue 2 重写 7 个数组方法但仍无法监听 length 赋值或直接下标赋值，且不支持新增/删除属性及 Map/Set 等内置类型。
Object.defineProperty 为什么不能监听数组下标变化
它只能劫持已存在的属性，对 arr[0] = 'new' 这种操作无反应，因为数组索引不是“属性”而是“元素位置”，且 push、pop 等方法会绕过 setter。Vue 2 为此做了特殊处理：重写了数组原型上的 7 个变更方法（push、shift、splice 等），但依然无法监听 arr.length = 0 或直接赋值下标（如 arr[1] = 'x'）。
- 必须提前声明所有响应式字段，否则新增属性不会触发更新
- 无法监听对象的新增/删除属性（
delete obj.key或obj.newKey = 1） - 对 Map / Set / Date / RegExp 等内置类型完全不支持
Proxy 能监听什么，又有哪些限制
Proxy 是对整个对象的代理，拦截的是“操作行为”而非单个属性，所以天然支持动态增删、数组索引赋值、甚至 in 操作符和 for...in 遍历。但它不能直接代理普通对象的原型链变更，也不能监听私有字段（#field）。
- 必须用
new Proxy(target, handler)创建新对象，原对象不受影响 - 嵌套对象仍需递归代理（否则深层修改不响应）
- 对
Array.prototype.slice()这类返回新数组的方法，返回值不是响应式对象 - IE 完全不支持，需确认运行环境（Node.js ≥ 6.0，现代浏览器均支持）
const reactive = (obj) => {
if (typeof obj !== 'object' || obj === null) return obj;
return new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
// 这里可做依赖收集（如 Vue 3 的 track）
return typeof res === 'object' ? reactive(res) : res;
},
set(target, key, val, receiver) {
// 这里可触发更新（如 Vue 3 的 trigger）
return Reflect.set(target, key, reactive(val), receiver);
}
});
};
Vue 2 和 Vue 3 的选择逻辑很说明问题
Vue 2 用 Object.defineProperty 是因兼容性妥协；Vue 3 切换到 Proxy 后，响应式系统更简洁、能力更强，也去掉了 $set 和 $delete API。但这不意味着 Proxy 在所有场景都“更强”——如果你的目标环境必须支持 IE11，或需要极低内存开销（Proxy 实例本身有额外内存占用），那 Object.defineProperty 反而更可控。
-
Object.defineProperty的 getter/setter 是静态定义，调试时容易定位 -
Proxy的 trap 是运行时拦截，堆栈更难追踪，尤其嵌套深时 - 对大量浅层属性的对象（如配置表），
Object.defineProperty初始化更快；对频繁增删属性的场景，Proxy更合适
手写双向绑定时最容易忽略的点
无论是用哪种方式，真正的难点从来不在“监听变化”，而在“如何精准通知谁更新”。比如：v-model 绑定一个输入框，你得在 input 事件中同步更新数据，同时在数据变化时反向更新 input.value —— 这部分 DOM 同步逻辑，和响应式核心是解耦的。
立即学习“Java免费学习笔记（深入）”；
- 不要在
set或settrap 中直接操作 DOM，应触发事件或调用更新函数 - 避免无限循环：DOM 更新 → 数据更新 → DOM 更新… 需加防抖或标志位
-
Proxy的set返回布尔值表示是否设置成功，必须显式return true，否则静默失败 - 对原始值（
string、number）无法代理，必须包装成对象（如{ value: 'xxx' }）
