使用Object.defineProperty实现响应式数据

技术教程
2025-10-31 20:26:02

Object.defineProperty通过get/set拦截属性读写，实现数据响应式，Vue 2据此追踪依赖并更新视图，但无法监听数组索引及属性增删，需递归遍历对象实现深度监听。

使用object.defineproperty实现响应式数据

在 J*aScript 中，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，借此实现响应式追踪。

递归监听对象所有属性

单个属性监听不够用，通常需要对整个对象进行深度监听。

极限网络办公Office Automation

专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬

0 查看详情极限网络办公Office Automation

可以通过递归遍历对象的每个属性，对每个可枚举属性调用 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 就会被调用，实现视图同步。