Object.defineProperty实现数据响应式方法

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();
  }
});

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';   // 嵌套属性也应响应