Vue核心 — Vue2响应式原理和核心源码解析（核心中的核心）

Vue响应式系统的核心是如何追踪属性的变化并通知视图更新。以下是Vue响应式系统核心的简化版源码解析：

function defineReactive(obj, key, val) {
  // 对象属性的描述符
  const dep = new Dep();
 
  // 追踪属性值
  const childOb = observe(val);
 
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // 添加依赖
      Dep.target && dep.addSub(Dep.target);
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      val = newVal;
      // 新值可能是个对象，需要重新追踪
      childOb = observe(newVal);
      // 通知依赖更新
      dep.notify();
    }
  });
}
 
function observe(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
 
  return new Observer(value);
}
 
class Observer {
  constructor(value) {
    this.value = value;
    this.dep = new Dep();
    // 追踪属性
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      // 为数组的特定方法包装原生操作以触发更新
      ...
    } else {
      // 为对象的属性遍历追踪
      for (const key in value) {
        defineReactive(value, key, value[key]);
      }
    }
  }
}
 
class Dep {
  constructor() {
    this.subs = [];
  }
 
  addSub(sub) {
    this.subs.push(sub);
  }
 
  notify() {
    this.subs.forEach(sub => {
      sub.update();
    });
  }
}
 
function def(obj, key, val) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: false,
    writable: true,
    configurable: true
  });
}

这个简化版的核心函数 defineReactive 创建了一个属性的追踪描述符，它包含了 get 和 set 方法。当属性被访问时，它会添加一个“依赖”（Dep.target），当属性被修改时，它会通知所有依赖进行更新。这个例子省略了数组追踪和其他复杂逻辑，以保持简洁。