Vue3源码全梳理

[zhangzheng-zz]

参考：https://www.gitsu.cn/detail?id=82

响应式系统：

Vue3响应式系统依旧通过数据劫持的方式，改用Proxy做代理。取值的时候track,赋值的时候trigger,effect将正在调用这个对象的函数activeEffect和响应式对象key联系起来实现响应式系统。

reactive

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  // ...
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  return proxy
}

get && set

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {

    const res = Reflect.get(target, key, receiver)

    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }
    return res
  }
}

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

track&trigger

export function track(target: object, type: TrackOpTypes, key: unknown) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  //activeEffect 正在调用这个对象的函数
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
  }
}

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  const depsMap = targetMap.get(target)
  const effects = new Set<ReactiveEffect>()
    // 有 scheduler 就先入队 queue
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
  }

  effects.forEach(run)
}

三个存储变量：targetMap (WeakMap) 对象 -> depsMap (Map) 依赖 -> dep(Set) 副作用

对于 Map WeakMap Set WeakSet 的各种api操作的劫持怎么实现？

我们使用 get、set、has等这些 api 的时候会触发 get，拿到的是这些操作函数，我们使用函数劫持，只要劫持一个 get方法（即对对象的key的访问）并替换成自己封装的方法。

export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
  get: createInstrumentationGetter(false, false)
}

const mutableInstrumentations: Record<string, Function> = {
  get(this: MapTypes, key: unknown) {
    return get(this, key)
  },
  get size() {
    return size((this as unknown) as IterableCollections)
  },
  has,
  add,
  set,
  delete: deleteEntry,
  clear,
  forEach: createForEach(false, false)
}

Vue2 vs Vue3

Vue3 使用 Proxy:

• 可以提升性能，Vue2是通过层层递归的方式对数据进行劫持，并且数据劫持一开始就要进行层层递归(一次性递归)，如果对象的路径非常深将会非常影响性能。而Proxy可以在用到数据的时候再进行对下一层属性的劫持。
• Proxy可以实现对整个对象的劫持，而Object.defineProperty()只能实现对对象的属性进行劫持。所以对于对象上的方法或者新增、删除的属性则无能为力。Proxy 可以劫持整个数组，对数组的增删等原生操作无需再次封装。 例外： 对数组的push，增加一项的时候key是index，此时index还未被track,怎么监听？ 将effect绑定到length这个key

  
  trigger

// new index added to array -> length changes add(depsMap.get('length'))