Vue3 源码阅读

191 阅读1分钟

全局对象

  1. const reactiveMap = new WeakMap(); 保存原始对象和代理对象(Proxy)之间的对应关系,非浅和只读代理对象
  2. const shallowReactiveMap = new WeakMap(); 浅对象和非只读对象对应关系
  3. const readonlyMap = new WeakMap(); 只读和非前对象,对应关系
  4. const shallowReadonlyMap = new WeakMap(); 浅对象和只读对象,对应关系

创建依赖收集Dep

其实就是创建了一个Set

image.png

track(target,type,key)

搜集对象依赖,track首先从全局targetMap(WeakMap)中获取当前对象的depsMap(Map),然后通过key调用获取Dep,即上面创建的Set对象,然后把当前激活的 activeEffect放入当前set中。

如果有一个对象为 const state = {a:1,b:2};
targetMap有可能为 {state:{a: new Set(activeEffect1),b: new Set(activeEffect2)}}

trackEffects(dep,debuggerEventExtraInfo)

dep为一个SetdebuggerEventExtraInfo{ effect: activeEffect, target, type, key },activeEffect为一个回调函数,targettype为类型(如:get)、key为数组下标或对象属性,