监听javascript对象属性变化的核心方法是proxy和object.defineproperty；2. proxy是现代首选方案，能拦截属性的读取、设置、删除及数组方法等几乎所有操作；3. object.defineproperty仅能监听已存在的属性，无法监听新增属性或数组变异方法，适用于属性固定的简单场景；4. proxy通过get和set拦截实现深度监听时需递归代理嵌套对象，但存在性能开销、循环引用、对象身份变化、序列化等问题；5. 数组监听在proxy中天然支持push、pop等方法，因其内部操作会触发set拦截，而object.defineproperty需hack式重写数组方法；6. 实际开发中推荐新项目使用proxy实现响应式，老项目或兼容性要求下可沿用object.defineproperty，但应清楚其局限性；7. 构建复杂响应式系统时建议使用vue 3等成熟框架，避免重复造轮子。
在JavaScript中，监听对象属性的变化是实现数据响应式、调试或进行数据同步的关键技术。核心方法主要围绕着
Proxy
和
Object.defineProperty
展开，它们提供了不同粒度与灵活性的监听能力。现代开发中，
Proxy
无疑是更推荐的选择，因为它能提供更全面的拦截能力，包括属性的读取、设置、删除，甚至是数组方法的调用等。
解决方案
要监听JavaScript对象属性的变化，最强大且灵活的工具是
Proxy
。它允许你创建一个对象的代理，并拦截对该对象执行的各种操作，如属性的读取（
get
）、设置（
set
）、删除（
deleteProperty
）等。
举个例子，如果你想在每次数据更新时都做点什么：
const data = { name: '张三', age: 30, address: { city: '北京', street: '长安街' }, hobbies: ['coding', 'reading']};const handler = { set(target, key, value, receiver) { console.log(`属性 '${String(key)}' 从 '${target[key]}' 变为 '${value}'`); // 确保原始操作得以执行，否则属性不会真正更新 return Reflect.set(target, key, value, receiver); }, get(target, key, receiver) { console.log(`访问了属性 '${String(key)}'`); return Reflect.get(target, key, receiver); }, deleteProperty(target, key) { console.log(`删除了属性 '${String(key)}'`); return Reflect.deleteProperty(target, key); }};const reactiveData = new Proxy(data, handler);// 测试reactiveData.age = 31; // 会触发set拦截reactiveData.name = '李四'; // 会触发set拦截console.log(reactiveData.age); // 会触发get拦截// 注意：直接修改嵌套对象属性不会触发顶层Proxy的set，因为address本身没有被重新赋值// reactiveData.address.city = '上海'; // 不会触发顶层Proxy的set，但可以被get捕捉到对address的访问// 删除属性delete reactiveData.age; // 会触发deleteProperty拦截console.log(reactiveData);
Proxy
的强大之处在于它能拦截几乎所有对目标对象的操作，包括对不存在属性的访问或设置，以及数组的各种修改方法（如
push
、
pop
等，这些操作最终也会触发内部的
set
）。
当然，在
Proxy
出现之前，
Object.defineProperty
是主要的手段。它允许你为对象的特定属性定义
getter
和
setter
。
function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { console.log(`访问了属性 '${key}'`); return val; }, set(newVal) { if (newVal === val) return; console.log(`属性 '${key}' 从 '${val}' 变为 '${newVal}'`); val = newVal; } });}const oldSchoolData = { message: 'Hello World'};defineReactive(oldSchoolData, 'message', oldSchoolData.message);oldSchoolData.message = 'Hello JS'; // 触发setconsole.log(oldSchoolData.message); // 触发get// 缺点：无法监听新增属性，也无法直接监听数组索引的变化oldSchoolData.newProp = 'something'; // 不会触发任何监听
Object.defineProperty
的问题在于它只能监听已经存在的属性，如果后续添加了新属性，需要手动再次调用
defineProperty
。对于数组，它也无法直接监听
push
、
pop
等方法的调用，只能监听通过索引直接赋值的情况。
Proxy
Proxy
与
Object.defineProperty
究竟如何抉择？
这确实是个老生常谈的问题，但对于实际项目来说，选择哪种方式，其背后的考量远不止“新旧”那么简单。我个人觉得，如果你正在构建一个全新的、需要高度响应式的数据系统（比如一个类Vue 3的框架），或者你需要对对象操作进行全面、细粒度的拦截，那么毫无疑问，
Proxy
是你的首选。
Proxy
的优势在于它的“非侵入性”和“全面性”。它不需要修改原始对象的属性定义，而是像一个守门员一样，在任何操作到达目标对象之前，都能先被它截获。这意味着你可以轻松地监听属性的添加、删除，甚至是方法调用。这对于构建像Vue 3那样的数据响应系统来说至关重要，它避免了Vue 2中
Object.defineProperty
带来的诸多限制，比如无法直接检测对象属性的添加或删除，以及数组索引的直接修改。
而
Object.defineProperty
，在我看来，更适合那些你只需要对少数已知属性进行精确控制的场景。比如，你可能想创建一个计算属性，或者在某个特定属性被访问时触发一个副作用。它的粒度更细，但同时也更“笨重”——你需要为每一个你想要监听的属性显式地定义
getter
和
setter
。如果对象属性很多，或者属性是动态生成的，这种方式会变得非常冗余且难以维护。历史地看，Vue 2之所以选择它，是因为当时
Proxy
的浏览器兼容性还不够好，这本身就是技术选型中一个绕不过去的坎。现在，
Proxy
的兼容性已经相当不错了，所以，除非有特别的兼容性要求（比如IE），否则真的没必要再纠结
Object.defineProperty
了。
总而言之，新项目无脑选
Proxy
，老项目或特定场景下，
Object.defineProperty
依然有其一席之地，但要清楚它的局限性。
监听数组变化，
Proxy
Proxy
有何独到之处？
数组的监听在JavaScript中一直是个有点让人头疼的问题，尤其是在
Object.defineProperty
的时代。那时，我们都知道直接修改数组长度、或者使用
push
、
pop
、
splice
等方法，
Object.defineProperty
是无法直接感知的。因为这些操作本质上是数组原型链上的方法调用，而不是直接对某个索引属性进行赋值。Vue 2为了解决这个问题，不得不对数组的原型方法进行“魔改”，也就是所谓的“数组变异方法”，这听起来就有点复杂和hacky。
而
Proxy
的出现，简直是为数组监听带来了福音。它的“独到之处”在于，它能拦截对目标对象的所有操作，这其中就包括了数组的各种方法。当你在一个
Proxy
代理的数组上调用
push
时，这个操作最终会触发
Proxy
的
set
拦截器，因为
push
方法内部会涉及到对新元素的索引赋值，以及对
length
属性的修改。
举个例子：
const myArray = [1, 2, 3];const arrayHandler = { set(target, key, value, receiver) { console.log(`数组元素或属性 '${String(key)}' 发生变化：从 '${target[key]}' 变为 '${value}'`); return Reflect.set(target, key, value, receiver); }, deleteProperty(target, key) { console.log(`删除了数组元素或属性 '${String(key)}'`); return Reflect.deleteProperty(target, key); }};const reactiveArray = new Proxy(myArray, arrayHandler);reactiveArray.push(4); // 会触发set拦截器，因为push会改变length属性和新增元素// 输出：// 数组元素或属性 '3' 发生变化：从 'undefined' 变为 '4'// 数组元素或属性 'length' 发生变化：从 '4' 变为 '4' (这里是因为length属性也被修改了)reactiveArray[0] = 10; // 同样触发set拦截器// 输出：// 数组元素或属性 '0' 发生变化：从 '1' 变为 '10'reactiveArray.pop(); // 也会触发set和deleteProperty拦截器// 输出：// 数组元素或属性 'length' 发生变化：从 '4' 变为 '3'// 删除了数组元素或属性 '3'console.log(reactiveArray);
可以看到，无论是直接通过索引赋值，还是通过
push
、
pop
等方法修改数组，
Proxy
都能很好地捕捉到这些变化。这大大简化了响应式系统对数组的处理逻辑，让代码更干净，也更符合直觉。这无疑是
Proxy
在处理复杂数据结构，尤其是数组时，相较于
Object.defineProperty
的巨大优势。
深度监听复杂对象，有哪些实践中的坑？
深度监听复杂对象，也就是当对象内部嵌套了其他对象或数组时，我们希望无论哪个层级的属性发生变化都能被感知到。这在构建响应式系统时非常常见，但实践起来，确实有一些需要注意的“坑”。
Proxy
默认是“浅层”监听的。这意味着，当你代理一个对象时，只有直接对这个对象进行的属性操作会被拦截。如果这个对象内部包含另一个对象，并且你修改了内部对象的属性，那么顶层的
Proxy
是无法感知的。
const deepData = { user: { name: 'Alice', info: { age: 25 } }};const deepHandler = { set(target, key, value, receiver) { console.log(`[Top Level] 属性 '${String(key)}' 变化`); return Reflect.set(target, key, value, receiver); }};const reactiveDeepData = new Proxy(deepData, deepHandler);reactiveDeepData.user.name = 'Bob'; // 不会触发Top Level的set// 因为你没有改变 reactiveDeepData.user 这个引用，只是改变了 user 对象内部的属性。console.log(reactiveDeepData.user.name); // Bob
要实现深度监听，你需要在每次获取到嵌套对象时，都将其也包裹成一个
Proxy
。这通常意味着在
get
拦截器中进行递归的
Proxy
化处理。
function createDeepReactive(obj) { if (typeof obj !== 'object' || obj === null) { return obj; } // 避免重复代理 if (obj.__isProxy__) { return obj; } const handler = { get(target, key, receiver) { const res = Reflect.get(target, key, receiver); // 如果获取到的是对象，且不是Proxy，就递归代理它 if (typeof res === 'object' && res !== null && !res.__isProxy__) { return createDeepReactive(res); } return res; }, set(target, key, value, receiver) { console.log(`[Deep Reactive] 属性 '${String(key)}' 从 '${target[key]}' 变为 '${value}'`); return Reflect.set(target, key, value, receiver); } // ... 其他拦截器如 deleteProperty 等 }; const proxy = new Proxy(obj, handler); // 标记一下，防止重复代理 Object.defineProperty(proxy, '__isProxy__', { value: true, enumerable: false, configurable: false }); return proxy;}const deepReactiveData = createDeepReactive(deepData);deepReactiveData.user.name = 'Charlie'; // 会触发setdeepReactiveData.user.info.age = 26; // 也会触发setdeepReactiveData.user.hobbies = ['swimming']; // 新增属性，也会触发setconsole.log(deepReactiveData.user.info.age);
实践中的坑：
性能开销： 递归地创建
Proxy
实例，尤其对于非常庞大或深度嵌套的数据结构，在初始化时可能会带来显著的性能开销。每次访问嵌套属性时，如果它还没被代理，就需要创建一个新的
Proxy
，这会增加一些运行时负担。循环引用： 如果对象中存在循环引用（A引用B，B又引用A），递归代理可能会导致无限循环，需要额外的逻辑来检测和处理这种情况，或者设置一个深度限制。对象身份变化： 每次通过
get
拦截器返回一个新的
Proxy
实例，会导致对象身份（
===
）的变化。这可能会影响到一些依赖对象身份进行比较的逻辑或第三方库。例如，如果你之前缓存了一个原始对象，但现在拿到的是它的
Proxy
版本，两者就不再全等了。序列化问题： 默认情况下，
JSON.stringify
在序列化
Proxy
对象时，只会序列化其目标对象（
target
）的属性。如果你的
Proxy
添加了一些额外的属性或逻辑，这些可能不会被序列化。你可能需要提供一个自定义的
toJSON
方法或
replacer
函数来正确处理。
this
上下文问题： 在
Proxy
的
get
拦截器中，如果直接返回目标对象的方法，当这个方法被调用时，其内部的
this
可能指向
Proxy
本身而不是原始目标对象。这通常可以通过
Reflect.get
来解决，它会正确地绑定
this
。
Proxy.revocable
的清理： 虽然不常用，但
Proxy.revocable
可以创建可撤销的代理。这意味着你可以手动解除代理，停止监听。但在实际的响应式系统中，通常不需要手动管理，因为当对象不再被引用时，垃圾回收机制会处理掉。
在我看来，深度监听是响应式框架的基石，但它绝不是一个“开箱即用”的简单特性。它需要仔细权衡性能、内存和开发复杂度。很多时候，框架会采用一些优化策略，比如懒代理（只在需要时才创建嵌套对象的代理），或者通过特定的数据结构设计来避免过度递归。对于我们日常应用开发，如果不是在构建底层框架，直接使用Vue 3或React等框架提供的响应式API会是更明智的选择，它们已经帮你踩过了这些坑。
以上就是js如何监听对象属性变化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516235.html
微信扫一扫 
支付宝扫一扫 
