vue2学习笔记8 - 通过object.defineProperty理解Vue的响应式原理（setter/getter）

// 假设我们有一个简单的Vue版本的对象
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log(`获取${key}：${val}`);
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      console.log(`设置${key}：${newVal}`);
      val = newVal;
    }
  });
}
 
// 使用示例
const data = { };
defineReactive(data, 'message', 'Hello');
 
// 测试响应式系统
console.log(data.message); // 输出: 获取message：Hello  // 访问属性
data.message = 'Hello Vue!'; // 输出: 设置message：Hello Vue!  // 修改属性
console.log(data.message); // 输出: 获取message：Hello Vue!  // 再次访问属性

这个示例代码展示了如何使用Object.defineProperty来定义一个响应式的属性。当你尝试读取data.message时，会触发getter，打印一条消息并返回值。当你尝试设置data.message的新值时，会触发setter，打印新值并更新内部的值。这是Vue响应式原理的一个基本实现。