Vue 响应式原理: 依赖收集和依赖更新 #

this.$delete(this.student, "name"); // 删除student对象属性name
this.$set(this.student, "age", "21"); // 添加student对象属性age
this.$set(this.student.hobby, 0, "王者"); // 更新student对象属性hobby数组

function initData(vm: Component) {
  // 获取组件中声明的data属性
  let data: any = vm.$options.data
  // 对new Vue实例下声明、组件中声明两种情况的处理
  data = vm._data = isFunction(data) ? getData(data, vm) : data || {}
  ...
  // observe data
  const ob = observe(data) // 为data属性创建Observer实例
  ob && ob.vmCount++
}

// 源码Observer类中对数组处理的部分代码
if (Array.isArray(value)) {
  if (hasProto) {
    protoAugment(value, arrayMethods);
  } else {
    copyAugment(value, arrayMethods, arrayKeys);
  }
  this.observeArray(value);
}

protoAugment(value, arrayMethods);

function protoAugment(target, src: Object) {
  target.__proto__ = src;
}

const arrayKeys = Object.getOwnPropertyNames(arrayMethods);
// vue2自己封装的7个原生数组方法
console.log(arrayKeys); // ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
copyAugment(value, arrayMethods, arrayKeys);

function copyAugment(target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i];
    def(target, key, src[key]); // 遍历数组元素通过为元素带上
  }
}

const house = { status: "未出租", price: 1200, type: "一房一厅" };
const obj = new Proxy(house, {
  get(target, key) {
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    return true;
  },
});
function effect() {
  console.log("房子状态：" + obj.status);
}

effect(); // 触发了proxy对象的get方法
obj.status = "已出租！";
effect();

const objSet = new Set();
const obj = new Proxy(house, {
  // 拦截读取操作
  get(target, key) {
    objSet.add(effect); // 收集effect
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    objSet.forEach((fn) => fn()); // 遍历effect
    return true;
  },
});

effect(() => console.log("房子状态：" + obj.status)); // 上面的例子会直接报not define

// 添加一个全局变量activeEffect存储依赖函数，这样effect就不会依赖函数的名字了
let activeEffect;
function effect(fn) {
  activeEffect = fn;
  // 执行副作用函数
  fn();
}

const weakMap = new WeakMap();
let activeEffect;
const track = (target, key) => {
  if (!activeEffect) {
    return;
  }
  // 从weakMap中获取当前target对象
  let depsMap = weakMap.get(target);
  if (!depsMap) {
    weakMap.set(target, (depsMap = new Map()));
  }
  // 从Map中属性key获取当前对象指定属性
  let deps = depsMap.get(key);
  if (!deps) {
    // 副作用函数存储
    depsMap.set(target, (deps = new Set()));
  }
  deps.add(activeEffect);
};
const trigger = (target, key) => {
  // 从weakMap中获取当前target对象
  const depsMap = weakMap.get(target);
  if (!depsMap) return;
  // 从Map中获取指定key对象属性的副作用函数集合
  const effects = depsMap.get(key);
  effects && effects.forEach((fn) => fn());
};

// 清空副作用函数依赖的集合
function cleanupEffect(effect: ReactiveEffect) {
  const { deps } = effect;
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect);
    }
    deps.length = 0;
  }
}

let effectTrackDepth = 0; // 当前副作用函数递归深度
export let trackOpBit = 1; // 在track函数中执行当前的嵌套副作用函数的标志位
const maxMarkerBits = 30; // 最大递归深度支持30位，

/ 每次执行 effect 副作用函数前，全局变量嵌套深度会自增1
trackOpBit = 1 << ++effectTrackDepth

// 执行完副作用函数后会自减
trackOpBit = 1 << --effectTrackDepth;

if (effectTrackDepth <= maxMarkerBits) {
  // 执行副作用函数之前，使用 `deps[i].w |= trackOpBit`对依赖dep[i]进行标记，追踪依赖
  initDepMarkers(this);
} else {
  // 降级方案：完全清理
  cleanupEffect(this);
}

//代表副作用函数执行前被 track 过
export const wasTracked = (dep: Dep): boolean => (dep.w & trackOpBit) > 0;
//代表副作用函数执行后被 track 过
export const newTracked = (dep: Dep): boolean => (dep.n & trackOpBit) > 0;

export const finalizeDepMarkers = (effect: ReactiveEffect) => {
  const { deps } = effect;
  if (deps.length) {
    let ptr = 0;
    for (let i = 0; i < deps.length; i++) {
      const dep = deps[i];
      // 有 was 标记但是没有 new 标记，应当删除
      if (wasTracked(dep) && !newTracked(dep)) {
        dep.delete(effect);
      } else {
        // 需要保留的依赖
        deps[ptr++] = dep;
      }
      // 清空，把当前位值0，先按位非，再按位与
      dep.w &= ~trackOpBit;
      dep.n &= ~trackOpBit;
    }
    // 保留依赖的长度
    deps.length = ptr;
  }
};

function cleanupEffect(effect: ReactiveEffect) {
  const { deps } = effect;
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect);
    }
    deps.length = 0;
  }
}

// target: 响应式代理对象, type: 订阅类型(get、hase、iterate), key: 要获取的target的键值
export function track(target: object, type: TrackOpTypes, key: unknown) {
// 如果允许追踪, 并且当前有正在运行的副作用
  if (shouldTrack && activeEffect) {
  // 获取当前target订阅的副作用集合, 如果不存在, 则新建一个
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      // 获取对应属性key订阅的副作用, 如果不存在, 则新建一个
      targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if (!dep) {
      depsMap.set(key, (dep = createDep()))
    }
    ...
    // 处理订阅副作用
    trackEffects(dep, eventInfo)
  }
}

export function trackEffects(dep: Dep,debuggerEventExtraInfo?: DebuggerEventExtraInfo) {
  let shouldTrack = false
  if (effectTrackDepth <= maxMarkerBits) { // 如果当前追踪深度不超过最大深度(30), 则添加订阅
    if (!newTracked(dep)) { // 如果未订阅过, 则新建
      dep.n |= trackOpBit // 据当前的追踪标识位设置依赖的new值
      shouldTrack = !wasTracked(dep) // 开启订阅追踪
    }
  } else {
    shouldTrack = !dep.has(activeEffect!)
  }

  if (shouldTrack) {
    dep.add(activeEffect!) // 将当前正在运行副作用作为新订阅者添加到该依赖中
    activeEffect!.deps.push(dep) // 缓存依赖到当前正在运行的副作用依赖数组
    ...
  }
}

// 根据不同的type从depsMap取出，放入effects，随后通过run方法将当前的`effect`执行
export function trigger(target: object,type: TriggerOpTypes,key?: unknown,newValue?: unknown,oldValue?: unknown,oldTarget?: Map<unknown, unknown> | Set<unknown>) {
  const depsMap = targetMap.get(target) // 获取响应式对象的副作用Map, 如果不存在说明未被追踪, 则不需要处理
  if (!depsMap) {
    return
  }
  let deps: (Dep | undefined)[] = []
  // 如果是清除操作，那就要执行依赖原始数据的所有监听方法。因为所有项都被清除了。
  if (type === TriggerOpTypes.CLEAR) { // clear
    // 如果是调用了集合的clear方法, 则要对其所有的副作用进行处理
    deps = [...depsMap.values()]
  } else if (key === 'length' && isArray(target)) {
    const newLength = Number(newValue)
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= newLength) {
        deps.push(dep)
      }
    })
  } else { // set add delete
    // key不为void 0，则说明肯定是SET | ADD | DELETE这三种操作
    // 然后将依赖这个key的所有监听函数推到相应队列中
    if (key !== void 0) {
      deps.push(depsMap.get(key))
    }
    switch (type) { // 根据不同type取出并存入deps
      case TriggerOpTypes.ADD:
         // 如果原始数据是数组，则key为length，否则为迭代行为标识符
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          deps.push(depsMap.get('length'))
        }
        break
      case TriggerOpTypes.DELETE:
       // 如果原始数据是数组，则key为length，否则为迭代行为标识符
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      case TriggerOpTypes.SET:
        if (isMap(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }
  ...
    const effects: ReactiveEffect[] = []
    for (const dep of deps) {
      if (dep) {
        effects.push(...dep)
      }
    }
    // 遍历effects元素执行run函数
    triggerEffects(createDep(effects))
  }
}

// 拦截器其实就是一个和 Array.prototype 一样的对象。
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach(
  function (method) {
    // 缓存原始方法
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
      value: function mutator(...args) {
        // 最终还是使用原生的 Array 原型方法去操作数组
        return original.apply(this, args);
      },
      eumerable: false,
      writable: false,
      configurable: true,
    });
  }
);