Object.defineProperty通过get/set拦截属性读写，实现数据响应式，Vue 2据此追踪依赖并更新视图，但无法监听数组索引及属性增删，需递归遍历对象实现深度监听。
在 JavaScript 中，Object.defineProperty 是实现数据响应式的一种核心手段，尤其在 Vue 2 中被广泛使用。它允许我们定义对象属性的读取（get）和写入（set）行为，从而在数据变化时执行额外逻辑，比如更新视图。
基本语法与配置项
Object.defineProperty(obj, prop, descriptor) 接收三个参数：
obj：要定义属性的对象 prop：属性名（字符串或 Symbol） descriptor：属性描述符，包括 get、set、value、writable、enumerable、configurable 等
在响应式系统中，主要关注 get 和 set 钩子。
监听属性的读取与修改
通过定义 getter 和 setter，可以在属性被访问或赋值时触发自定义逻辑。
let data = { message: 'Hello' };let tempValue = data.message;Object.defineProperty(data, 'message', { get() { console.log('属性被读取'); return tempValue; }, set(newVal) { console.log('属性被修改为：', newVal); tempValue = newVal; // 这里可以通知视图更新 updateView(); }});
每次访问 data.message 会触发 get，赋值时触发 set，借此实现响应式追踪。
递归监听对象所有属性
单个属性监听不够用，通常需要对整个对象进行深度监听。
可以通过递归遍历对象的每个属性，对每个可枚举属性调用 Object.defineProperty。
function defineReactive(obj, key, value) { if (typeof value === 'object' && value !== null) { observe(value); // 深度监听嵌套对象 } Object.defineProperty(obj, key, { get() { console.log(`读取 ${key}: ${value}`); return value; }, set(newVal) { if (newVal === value) return; console.log(`${key} 从 ${value} 变为 ${newVal}`); value = newVal; updateView(); // 视图更新 } });}function observe(obj) { if (typeof obj !== 'object' || obj === null) return; Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]); });}
这样就能监听对象深层属性的变化。
简单实现一个响应式系统
结合以上逻辑，可以封装一个最小化的响应式示例。
function updateView() { document.getElementById('app').innerText = data.message;}let data = { message: '初始值', user: { name: 'Alice' }};observe(data);// 测试data.message = '新消息'; // 视图自动更新data.user.name = 'Bob'; // 嵌套属性也应响应
只要数据变动，updateView 就会被调用，实现视图同步。
基本上就这些。虽然现代框架多用 Proxy 实现响应式（Vue 3），但理解 Object.defineProperty 的机制有助于掌握响应式原理的本质。不过要注意，它无法监听数组索引变化或对象新增/删除属性，需额外处理。不复杂但容易忽略。
以上就是使用Object.defineProperty实现响应式数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534186.html
微信扫一扫 
支付宝扫一扫 
