拆解Vue2源码-01 reactive

用户52438855928872026-05-24 13:33
js 复制代码
// Step 1: 简单的属性拦截器
// 尤雨溪的核心思路：利用 Object.defineProperty 拦截属性的读取（get）和修改（set）

function defineReactive(obj, key, val) {
  // 递归观察子对象
  observe(val);

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      console.log(`🔍 属性 [${key}] 被读取了，当前值是:`, val);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log(`✍️ 属性 [${key}] 被修改了，旧值: [${val}], 新值: [${newVal}]`);
      val = newVal;
      // 新赋的值如果也是对象，需要继续观察
      observe(newVal);
    }
  });
}

function observe(value) {
  // 如果不是对象或者是 null，就不需要观察
  if (!value || typeof value !== 'object') {
    return;
  }
  
  // 遍历对象的所有属性，进行拦截
  Object.keys(value).forEach(key => {
    defineReactive(value, key, value[key]);
  });
}

// ==================== 测试我们的 Step 1 ====================
const user = {
  name: '尤雨溪',
  age: 30,
  skills: {
    frontend: 'Vue',
    backend: 'Node'
  }
};

// 激活响应式！
observe(user);

console.log('--- 👉 尝试读取数据 ---');
const name = user.name; // 应该触发 get

console.log('\n--- 👉 尝试修改数据 ---');
user.age = 38; // 应该触发 set

console.log('\n--- 👉 尝试修改嵌套数据 ---');
user.skills.frontend = 'Vue 3'; // 嵌套属性也应该被拦截！