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，借此实现响应式追踪。
递归监听对象所有属性
单个属性监听不够用，通常需要对整个对象进行深度监听。
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
可以通过递归遍历对象的每个属性，对每个可枚举属性调用 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 的机制有助于掌握响应式原理的本质。不过要注意，它无法监听数组索引变化或对象新增/删除属性，需额外处理。不复杂但容易忽略。
