1.1万字从零解读Vue3.0源码响应式系统

Vue中比较重要的一部分就是响应式系统了,本文作者将带你了解Vue3.0源码的响应式系统相关代码,值得看看。

作者:hkc52

https://hkc452.github.io/slamdunk-the-vue3/

effect 是响应式系统的核心,而响应式系统又是 vue3 中的核心,所以从 effect 开始讲起。

首先看下面 effect 的传参,fn 是回调函数,options 是传入的参数。

export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}
  • 其中 option 的参数如下,都是属于可选的。

参数 & 含义

  • lazy 是否延迟触发 effect
  • computed 是否为计算属性
  • scheduler 调度函数
  • onTrack 追踪时触发
  • onTrigger 触发回调时触发
  • onStop 停止监听时触发
export interface ReactiveEffectOptions {
  lazy?: boolean
  computed?: boolean
  scheduler?: (job: ReactiveEffect) => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  onStop?: () => void
}
  • 分析完参数之后,继续我们一开始的分析。当我们调用 effect 时,首先判断传入的 fn 是否是 effect,如果是,取出原始值,然后调用 createReactiveEffect 创建 新的effect, 如果传入的 option 中的 lazy 不为为 true,则立即调用我们刚刚创建的 effect, 最后返回刚刚创建的 effect。
  • 那么createReactiveEffect是怎样是创建 effect的呢?
function createReactiveEffect<T = any>(
  fn: (...args: any[]) => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(...args: unknown[]): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn(...args)
    }
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        effectStack.push(effect)
        activeEffect = effect
        return fn(...args)
      } finally {
        effectStack.pop()
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}

我们先忽略 reactiveEffect,继续看下面的挂载的属性。

effect 挂载属性 含义

  • id 自增id, 唯一标识effect
  • _isEffect 用于标识方法是否是effect
  • active effect 是否激活
  • raw 创建effect是传入的fn
  • deps 持有当前 effect 的dep 数组
  • options 创建effect是传入的options
  • 回到 reactiveEffect,如果 effect 不是激活状态,这种情况发生在我们调用了 effect 中的 stop 方法之后,那么先前没有传入调用 scheduler 函数的话,直接调用原始方法fn,否则直接返回。
  • 那么处于激活状态的 effect 要怎么进行处理呢?首先判断是否当前 effect 是否在 effectStack 当中,如果在,则不进行调用,这个主要是为了避免死循环。拿下面测试用例来看
it('should avoid infinite loops with other effects', () => {
    const nums = reactive({ num1: 0, num2: 1 })

    const spy1 = jest.fn(() => (nums.num1 = nums.num2))
    const spy2 = jest.fn(() => (nums.num2 = nums.num1))
    effect(spy1)
    effect(spy2)
    expect(nums.num1).toBe(1)
    expect(nums.num2).toBe(1)
    expect(spy1).toHaveBeenCalledTimes(1)
    expect(spy2).toHaveBeenCalledTimes(1)
    nums.num2 = 4
    expect(nums.num1).toBe(4)
    expect(nums.num2).toBe(4)
    expect(spy1).toHaveBeenCalledTimes(2)
    expect(spy2).toHaveBeenCalledTimes(2)
    nums.num1 = 10
    expect(nums.num1).toBe(10)
    expect(nums.num2).toBe(10)
    expect(spy1).toHaveBeenCalledTimes(3)
    expect(spy2).toHaveBeenCalledTimes(3)
})
  • 如果不加 effectStack,会导致 num2 改变,触发了 spy1, spy1 里面 num1 改变又触发了 spy2, spy2 又会改变 num2,从而触发了死循环。
  • 接着是清除依赖,每次 effect 运行都会重新收集依赖, deps 是持有 effect 的依赖数组,其中里面的每个 dep 是对应对象某个 key 的 全部依赖,我们在这里需要做的就是首先把 effect 从 dep 中删除,最后把 deps 数组清空。
function cleanup(effect: ReactiveEffect) {
  const { deps } = effect
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect)
    }
    deps.length = 0
  }
}
  • 清除完依赖,就开始重新收集依赖。首先开启依赖收集,把当前 effect 放入 effectStack 中,然后讲 activeEffect 设置为当前的 effect,activeEffect 主要为了在收集依赖的时候使用(在下面会很快讲到),然后调用 fn 并且返回值,当这一切完成的时候,finally 阶段,会把当前 effect 弹出,恢复原来的收集依赖的状态,还有恢复原来的 activeEffect。
 try {
    enableTracking()
    effectStack.push(effect)
    activeEffect = effect
    return fn(...args)
  } finally {
    effectStack.pop()
    resetTracking()
    activeEffect = effectStack[effectStack.length - 1]
  }
  • 那 effect 是怎么收集依赖的呢?vue3 利用 proxy 劫持对象,在上面运行 effect 中读取对象的时候,当前对象的 key 的依赖 set集合 会把 effect 收集进去。
export function track(target: object, type: TrackOpTypes, key: unknown) {
  ...
}
  • vue3 在 reactive 中触发 track 函数,reactive 会在单独的章节讲。触发 track 的参数中,object 表示触发 track 的对象, type 代表触发 track 类型,而 key 则是 触发 track 的 object 的 key。在下面可以看到三种类型的读取对象会触发 track,分别是 get、 has、 iterate。
export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}
  • 回到 track 内部,如果 shouldTrack 为 false 或者 activeEffect 为空,则不进行依赖收集。接着 targetMap 里面有没有该对象,没有新建 map,然后再看这个 map 有没有这个对象的对应 key 的 依赖 set 集合,没有则新建一个。如果对象对应的 key 的 依赖 set 集合也没有当前 activeEffect, 则把 activeEffect 加到 set 里面,同时把 当前 set 塞到 activeEffect 的 deps 数组。最后如果是开发环境而且传入了 onTrack 函数,则触发 onTrack。所以 deps 就是 effect 中所依赖的 key 对应的 set 集合数组, 毕竟一般来说,effect 中不止依赖一个对象或者不止依赖一个对象的一个key,而且 一个对象可以能不止被一个 effect 使用,所以是 set 集合数组。
if (!shouldTrack || activeEffect === undefined) {
    return
  }
  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()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
  • 依赖都收集完毕了,接下来就是触发依赖。如果 targetMap 为空,说明这个对象没有被追踪,直接return。
export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }
  ...
}
  • 其中触发的 type, 包括了 set、add、delete 和 clear。
export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}
  • 接下来对 key 收集的依赖进行分组,computedRunners 具有更高的优先级,会触发下游的 effects 重新收集依赖,

const effects = new Set() const computedRunners = new Set() add 方法是将 effect 添加进不同分组的函数,其中 effect !== activeEffect 这个是为了避免死循环,在下面的注释也写的很清楚,避免出现 foo.value++ 这种情况。至于为什么是 set 呢,要避免 effect 多次运行。就好像循环中,set 触发了 trigger ,那么 ITERATE 和 当前 key 可能都属于同个 effect,这样就可以避免多次运行了。

const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
if (effectsToAdd) {
  effectsToAdd.forEach(effect => {
    if (effect !== activeEffect || !shouldTrack) {
      if (effect.options.computed) {
        computedRunners.add(effect)
      } else {
        effects.add(effect)
      }
    } else {
      // the effect mutated its own dependency during its execution.
      // this can be caused by operations like foo.value++
      // do not trigger or we end in an infinite loop
    }
  })
}
}
  • 下面根据触发 key 类型的不同进行 effect 的处理。如果是 clear 类型,则触发这个对象所有的 effect。如果 key 是 length , 而且 target 是数组,则会触发 key 为 length 的 effects ,以及 key 大于等于新 length的 effects, 因为这些此时数组长度变化了。
if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    depsMap.forEach(add)
} else if (key === 'length' && isArray(target)) {
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        add(dep)
      }
    })
}
  • 下面则是对正常的新增、修改、删除进行 effect 的分组, isAddOrDelete 表示新增 或者不是数组的删除,这为了对迭代 key的 effect 进行触发,如果 isAddOrDelete 为 true 或者是 map 对象的设值,则触发 isArray(target) ? ‘length’ : ITERATE_KEY 的 effect ,如果 isAddOrDelete 为 true 且 对象为 map, 则触发 MAP_KEY_ITERATE_KEY 的 effect
else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      add(depsMap.get(key))
    }
    // also run for iteration key on ADD | DELETE | Map.SET
    const isAddOrDelete =
      type === TriggerOpTypes.ADD ||
      (type === TriggerOpTypes.DELETE && !isArray(target))
    if (
      isAddOrDelete ||
      (type === TriggerOpTypes.SET && target instanceof Map)
    ) {
      add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))
    }
    if (isAddOrDelete && target instanceof Map) {
      add(depsMap.get(MAP_KEY_ITERATE_KEY))
    }
}
  • 最后是运行 effect, 像上面所说的,computed effects 会优先运行,因为 computed effects 在运行过程中,第一次会触发上游把cumputed effect收集进去,再把下游 effect 收集起来。
  • 还有一点,就是 effect.options.scheduler,如果传入了调度函数,则通过 scheduler 函数去运行 effect, 但是 scheduler 里面可能不一定使用了 effect,例如 computed 里面,因为 computed 是延迟运行 effect, 这个会在讲 computed 的时候再讲。
const run = (effect: ReactiveEffect) => {
    if (__DEV__ && effect.options.onTrigger) {
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
}

// Important: computed effects must be run first so that computed getters
// can be invalidated before any normal effects that depend on them are run.
computedRunners.forEach(run)
effects.forEach(run)
  • 可以发现,不管是 track 还是 trigger, 都会导致 effect 重新运行去收集依赖。
  • 最后再讲一个 stop 方法,当我们调用 stop 方法后,会清空其他对象对 effect 的依赖,同时调用 onStop 回调,最后将 effect 的激活状态设置为 false
export function stop(effect: ReactiveEffect) {
  if (effect.active) {
    cleanup(effect)
    if (effect.options.onStop) {
      effect.options.onStop()
    }
    effect.active = false
  }
}
  • 这样当再一次调用 effect 的时候,不会进行依赖的重新收集,而且没有调度函数,就直接返回原始的 fn 的运行结果,否则直接返回 undefined。
if (!effect.active) {
  return options.scheduler ? undefined : fn(...args)
}

reactive 是 vue3 中对数据进行劫持的核心,主要是利用了 Proxy 进行劫持,相比于 Object.defineproperty 能够劫持的类型和范围都更好,再也不用像 vue2 中那样对数组进行类似 hack 方式的劫持了。

  • 下面快速看看 vue3 是怎么劫持。首先看看这个对象是是不是 __v_isReadonly 只读的,这个枚举在后面进行讲述,如果是,直接返回,否者调用 createReactiveObject 进行创建。
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target).__v_isReadonly) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}
  • createReactiveObject 中,有个四个参数,target 就是我们需要传入的对象,isReadonly 表示要创建的代理是不是只可读的,baseHandlers 是对进行基本类型的劫持,即 [Object,Array] ,collectionHandlers 是对集合类型的劫持, 即 [Set, Map, WeakMap, WeakSet]。
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
    return target
  }
  // target already has corresponding Proxy
  if (
    hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
  ) {
    return isReadonly ? target.__v_readonly : target.__v_reactive
  }
  // only a whitelist of value types can be observed.
  if (!canObserve(target)) {
    return target
  }
  const observed = new Proxy(
    target,
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )
  def(
    target,
    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
    observed
  )
  return observed
}
  • 如果我们传入是 target 不是object,直接返回。而如果 target 已经是个 proxy ,而且不是要求这个proxy 是已读的,但这个 proxy 是个响应式的,则直接返回这个 target。什么意思呢?我们创建的 proxy 有两种类型,一种是响应式的,另外一种是只读的。
  • 而如果我们传入的 target 上面有挂载了响应式的 proxy,则直接返回上面挂载的 proxy 。
  • 如果上面都不满足,则需要检查一下我们传进去的 target 是否可以进行劫持观察,如果 target 上面挂载了 __v_skip 属性 为 true 或者 不是我们再在上面讲参数时候讲的六种类型,或者 对象被freeze 了,还是不能进行劫持。
const canObserve = (value: Target): boolean => {
  return (
    !value.__v_skip &&
    isObservableType(toRawType(value)) &&
    !Object.isFrozen(value)
  )
}
  • 如果上面条件满足,则进行劫持,可以看到我们会根据 target 类型的不同进行不同的 handler,最后根据把 observed 挂载到原对象上,同时返回 observed。
 const observed = new Proxy(
    target,
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )
  def(
    target,
    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
    observed
  )
  return observed
  • 现在继续讲讲上面 ReactiveFlags 枚举,skip 用于标记对象不可以进行代理,可以用于 创建 component 的时候,把options 进行 markRaw,isReactive 和 isReadonly 都是由 proxy 劫持返回值,表示 proxy 的属性,raw 是 proxy 上面的 原始target ,reactive 和 readonly 是挂载在 target 上面的 proxy
export const enum ReactiveFlags {
  skip = '__v_skip',
  isReactive = '__v_isReactive',
  isReadonly = '__v_isReadonly',
  raw = '__v_raw',
  reactive = '__v_reactive',
  readonly = '__v_readonly'
}
  • 再讲讲可以创建的四种 proxy, 分别是reactive、 shallowReactive 、readonly 和 shallowReadonly。其实从字面意思就可以看出他们的区别了。具体细节会在 collectionHandlers 和 baseHandlers 进行讲解

baseHandlers 中主要包含四种 handler, mutableHandlers、readonlyHandlers、shallowReactiveHandlers、 shallowReadonlyHandlers。这里先介绍 mutableHandlers, 因为其他三种 handler 也算是 mutableHandlers 的变形版本。

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}
  • 从 mdn 上面可以看到,
    • handler.get() 方法用于拦截对象的读取属性操作。
    • handler.set() 方法是设置属性值操作的捕获器。
    • handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。
    • handler.has() 方法是针对 in 操作符的代理方法。
    • handler.ownKeys() 方法用于拦截
    • Object.getOwnPropertyNames()
    • Object.getOwnPropertySymbols()
    • Object.keys()
    • for…in循环
  • 从下面可以看到 ownKeys 触发时,主要追踪 ITERATE 操作,has 触发时,追踪 HAS 操作,而 deleteProperty 触发时,我们要看看是否删除成功以及删除的 key 是否是对象自身拥有的。
function deleteProperty(target: object, key: string | symbol): boolean {
  const hadKey = hasOwn(target, key)
  const oldValue = (target as any)[key]
  const result = Reflect.deleteProperty(target, key)
  if (result && hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  track(target, TrackOpTypes.HAS, key)
  return result
}

function ownKeys(target: object): (string | number | symbol)[] {
  track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
  return Reflect.ownKeys(target)
}
  • 接下来看看 set handler, set 函数通过 createSetter 工厂方法 进行创建,/#PURE/ 是为了 rollup tree shaking 的操作。
  • 对于非 shallow , 如果原来的对象不是数组, 旧值是 ref,新值不是 ref,则让新的值 赋值给 ref.value , 让 ref 去决定 trigger,这里不展开,ref 会在ref 章节展开。如果是 shallow ,管它三七二十一呢。
const set = /*#__PURE__*/ createSetter()
const shallowSet = /*#__PURE__*/ createSetter(true)
function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    const oldValue = (target as any)[key]
    if (!shallow) {
      value = toRaw(value)
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
    }

   ...
    return result
  }
}
  • 接下来进行设置,需要注意的是,如果 target 是在原型链的值,那么 Reflect.set(target, key, value, receiver) 的设值值设置起作用的是 receiver 而不是 target,这也是什么在这种情况下不要触发 trigger 的原因。
  • 那么在 target === toRaw(receiver) 时,如果原来 target 上面有 key, 则触发 SET 操作,否则触发 ADD 操作。
    const hadKey = hasOwn(target, key)
    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)
      }
    }
  • 接下来说说 get 操作,get 有四种,我们先拿其中一种说说。
const get = /*#__PURE__*/ createGetter()
const shallowGet = /*#__PURE__*/ createGetter(false, true)
const readonlyGet = /*#__PURE__*/ createGetter(true)
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)

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

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

    if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {
      return res
    }

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

    if (isRef(res)) {
      if (targetIsArray) {
        !isReadonly && track(target, TrackOpTypes.GET, key)
        return res
      } else {
        // ref unwrapping, only for Objects, not for Arrays.
        return res.value
      }
    }

    !isReadonly && track(target, TrackOpTypes.GET, key)
    return isObject(res)
      ? isReadonly
        ? // need to lazy access readonly and reactive here to avoid
          // circular dependency
          readonly(res)
        : reactive(res)
      : res
  }
}
  • 首先如果 key 是 ReactiveFlags, 直接返回值,ReactiveFlags 的枚举值在 reactive 中讲过。
 if (key === ReactiveFlags.isReactive) {
  return !isReadonly
} else if (key === ReactiveFlags.isReadonly) {
  return isReadonly
} else if (key === ReactiveFlags.raw) {
  return target
}
  • 而如果 target 是数组,而且调用了 [‘includes’, ‘indexOf’, ‘lastIndexOf’] 这三个方法,则调用 arrayInstrumentations 进行获取值,
const targetIsArray = isArray(target)
    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
  • arrayInstrumentations 中会触发数组每一项值得 GET 追踪,因为 一旦数组的变了,方法的返回值也会变,所以需要全部追踪。对于 args 参数,如果第一次调用返回失败,会尝试将 args 进行 toRaw 再调用一次。
const arrayInstrumentations: Record<string, Function> = {}
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
  arrayInstrumentations[key] = function(...args: any[]): any {
    const arr = toRaw(this) as any
    for (let i = 0, l = (this as any).length; i < l; i++) {
      track(arr, TrackOpTypes.GET, i + '')
    }
    // we run the method using the original args first (which may be reactive)
    const res = arr[key](...args)
    if (res === -1 || res === false) {
      // if that didn't work, run it again using raw values.
      return arr[key](...args.map(toRaw))
    } else {
      return res
    }
  }
})

如果 key 是 Symbol ,而且也是 ecma 中 Symbol 内置的 key 或者 key 是 获取对象上面的原型,则直接返回 res 值。

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

if (isSymbol(key) && builtInSymbols.has(key) || key === ‘proto‘) { return res }

  • 而如果是 shallow 为 true,说明而且不是只读的,则追踪 GET 追踪,这里可以看出,只读不会进行追踪。
if (shallow) {
  !isReadonly && track(target, TrackOpTypes.GET, key)
  return res
}
  • 接下来都是针对非 shallow的。如果返回值是 ref,且 target 是数组,在非可读的情况下,进行 Get 的 Track 操作,对于如果 target 是对象,则直接返回 ref.value,但是不会在这里触发 Get 操作,而是由 ref 内部进行 track。
if (isRef(res)) {
  if (targetIsArray) {
    !isReadonly && track(target, TrackOpTypes.GET, key)
    return res
  } else {
    // ref unwrapping, only for Objects, not for Arrays.
    return res.value
  }
}
  • 对于非只读,我们还要根据 key 进行 Track。而对于返回值,如果是对象,我们还要进行一层 wrap, 但这层是 lazy 的,也就是只有我们读取到 key 的时候,才会读下面的 值进行 reactive 包装,这样可以避免出现循环依赖而导致的错误,因为这样就算里面有循环依赖也不怕,反正是延迟取值,而不会导致栈溢出。
!isReadonly && track(target, TrackOpTypes.GET, key)
return isObject(res)
  ? isReadonly
    ? // need to lazy access readonly and reactive here to avoid
      // circular dependency
      readonly(res)
    : reactive(res)
  : res
  • 这就是 mutableHandlers ,而对于 readonlyHandlers,我们可以看出首先不允许任何 set、 deleteProperty 操作,然后对于 get,我们刚才也知道,不会进行 track 操作。剩下两个 shallowGet 和 shallowReadonlyGet,就不在讲了。
export const readonlyHandlers: ProxyHandler<object> = {
  get: readonlyGet,
  has,
  ownKeys,
  set(target, key) {
    if (__DEV__) {
      console.warn(
        `Set operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  },
  deleteProperty(target, key) {
    if (__DEV__) {
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  }
}

collectionHandlers 主要是对 set、map、weakSet、weakMap 四种类型的对象进行劫持。主要有下面三种类型的 handler,当然照旧,我们拿其中的 mutableCollectionHandlers 进行讲解。剩余两种结合理解。

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

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

export const readonlyCollectionHandlers: ProxyHandler<CollectionTypes> = {
  get: createInstrumentationGetter(true, false)
}
  • mutableCollectionHandlers 主要是对 collection 的方法进行劫持,所以主要是对 get 方法进行代理,接下来对 createInstrumentationGetter(false, false) 进行研究。
  • instrumentations 是代理 get 访问的 handler,当然如果我们访问的 key 是 ReactiveFlags,直接返回存储的值,否则如果访问的 key 在 instrumentations 上,在由 instrumentations 进行处理。
function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
  const instrumentations = shallow
    ? shallowInstrumentations
    : isReadonly
      ? readonlyInstrumentations
      : mutableInstrumentations

  return (
    target: CollectionTypes,
    key: string | symbol,
    receiver: CollectionTypes
  ) => {
    if (key === ReactiveFlags.isReactive) {
      return !isReadonly
    } else if (key === ReactiveFlags.isReadonly) {
      return isReadonly
    } else if (key === ReactiveFlags.raw) {
      return target
    }

    return Reflect.get(
      hasOwn(instrumentations, key) && key in target
        ? instrumentations
        : target,
      key,
      receiver
    )
  }
}
  • 接下来看看 mutableInstrumentations ,可以看到 mutableInstrumentations 对常见集合的增删改查以及 迭代方法进行了代理,我们就顺着上面的 key 怎么进行拦截的。注意 this: MapTypes 是 ts 上对 this 类型进行标注
const mutableInstrumentations: Record<string, Function> = {
  get(this: MapTypes, key: unknown) {
    return get(this, key, toReactive)
  },
  get size() {
    return size((this as unknown) as IterableCollections)
  },
  has,
  add,
  set,
  delete: deleteEntry,
  clear,
  forEach: createForEach(false, false)
}
const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
iteratorMethods.forEach(method => {
  mutableInstrumentations[method as string] = createIterableMethod(
    method,
    false,
    false
  )
  readonlyInstrumentations[method as string] = createIterableMethod(
    method,
    true,
    false
  )
  shallowInstrumentations[method as string] = createIterableMethod(
    method,
    true,
    true
  )
})
  • get 方法 首先获取 target ,对 target 进行 toRaw, 这个会被 createInstrumentationGetter 中的 proxy 拦截返回原始的 target,然后对 key 也进行一次 toRaw, 如果两者不一样,说明 key 也是 reative 的, 对 key 和 rawkey 都进行 track ,然后调用 target 原型上面的 has 方法,如果 key 为 true ,调用 get 获取值,同时对值进行 wrap ,对于 mutableInstrumentations 而言,就是 toReactive。
function get(
  target: MapTypes,
  key: unknown,
  wrap: typeof toReactive | typeof toReadonly | typeof toShallow
) {
  target = toRaw(target)
  const rawKey = toRaw(key)
  if (key !== rawKey) {
    track(target, TrackOpTypes.GET, key)
  }
  track(target, TrackOpTypes.GET, rawKey)
  const { has, get } = getProto(target)
  if (has.call(target, key)) {
    return wrap(get.call(target, key))
  } else if (has.call(target, rawKey)) {
    return wrap(get.call(target, rawKey))
  }
}
  • has 方法 跟 get 方法差不多,也是对 key 和 rawkey 进行 track。
function has(this: CollectionTypes, key: unknown): boolean {
  const target = toRaw(this)
  const rawKey = toRaw(key)
  if (key !== rawKey) {
    track(target, TrackOpTypes.HAS, key)
  }
  track(target, TrackOpTypes.HAS, rawKey)
  const has = getProto(target).has
  return has.call(target, key) || has.call(target, rawKey)
}
  • size 和 add 方法 size 最要是返回集合的大小,调用原型上的 size 方法,同时触发 ITERATE 类型的 track,而 add 方法添加进去之前要判断原本是否已经存在了,如果存在,则不会触发 ADD 类型的 trigger。
function size(target: IterableCollections) {
  target = toRaw(target)
  track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
  return Reflect.get(getProto(target), 'size', target)
}

function add(this: SetTypes, value: unknown) {
  value = toRaw(value)
  const target = toRaw(this)
  const proto = getProto(target)
  const hadKey = proto.has.call(target, value)
  const result = proto.add.call(target, value)
  if (!hadKey) {
    trigger(target, TriggerOpTypes.ADD, value, value)
  }
  return result
}

set 方法

  • set 方法是针对 map 类型的,从 this 的类型我们就可以看出来了, 同样这里我们也会对 key 做两个校验,第一,是看看现在 map 上面有没有存在同名的 key,来决定是触发 SET 还是 ADD 的 trigger, 第二,对于开发环境,会进行 checkIdentityKeys 检查
function set(this: MapTypes, key: unknown, value: unknown) {
  value = toRaw(value)
  const target = toRaw(this)
  const { has, get, set } = getProto(target)

  let hadKey = has.call(target, key)
  if (!hadKey) {
    key = toRaw(key)
    hadKey = has.call(target, key)
  } else if (__DEV__) {
    checkIdentityKeys(target, has, key)
  }

  const oldValue = get.call(target, key)
  const result = set.call(target, key, value)
  if (!hadKey) {
    trigger(target, TriggerOpTypes.ADD, key, value)
  } else if (hasChanged(value, oldValue)) {
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
  }
  return result
}
  • checkIdentityKeys 就是为了检查目标对象上面,是不是同时存在 rawkey 和 key,因为这样可能会数据不一致。
function checkIdentityKeys(
  target: CollectionTypes,
  has: (key: unknown) => boolean,
  key: unknown
) {
  const rawKey = toRaw(key)
  if (rawKey !== key && has.call(target, rawKey)) {
    const type = toRawType(target)
    console.warn(
      `Reactive ${type} contains both the raw and reactive ` +
        `versions of the same object${type === `Map` ? `as keys` : ``}, ` +
        `which can lead to inconsistencies. ` +
        `Avoid differentiating between the raw and reactive versions ` +
        `of an object and only use the reactive version if possible.`
    )
  }
}
  • deleteEntry 和 clear 方法
  • deleteEntry 主要是为了触发 DELETE trigger ,流程跟上面 set 方法差不多,而 clear 方法主要是触发 CLEAR track,但是里面做了一个防御性的操作,就是如果集合的长度已经为0,则调用 clear 方法不会触发 trigger。
function deleteEntry(this: CollectionTypes, key: unknown) {
  const target = toRaw(this)
  const { has, get, delete: del } = getProto(target)
  let hadKey = has.call(target, key)
  if (!hadKey) {
    key = toRaw(key)
    hadKey = has.call(target, key)
  } else if (__DEV__) {
    checkIdentityKeys(target, has, key)
  }

  const oldValue = get ? get.call(target, key) : undefined
  // forward the operation before queueing reactions
  const result = del.call(target, key)
  if (hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

function clear(this: IterableCollections) {
  const target = toRaw(this)
  const hadItems = target.size !== 0
  const oldTarget = __DEV__
    ? target instanceof Map
      ? new Map(target)
      : new Set(target)
    : undefined
  // forward the operation before queueing reactions
  const result = getProto(target).clear.call(target)
  if (hadItems) {
    trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget)
  }
  return result
}
  • forEach 方法 在调用 froEach 方法的时候会触发 ITERATE 类型的 track,需要注意 Size 方法也会同样类型的 track,毕竟集合整体的变化会导致整个两个方法的输出不一样。顺带提一句,还记得我们的 effect 时候的 trigger 吗,对于 SET | ADD | DELETE 等类似的操作,因为会导致集合值得变化,所以也会触发 ITERATE_KEY 或则 MAP_KEY_ITERATE_KEY 的 effect 重新收集依赖。
  • 在调用原型上的 forEach 进行循环的时候,会对 key 和 value 都进行一层 wrap,对于我们来说,就是 reactive。
function createForEach(isReadonly: boolean, shallow: boolean) {
  return function forEach(
    this: IterableCollections,
    callback: Function,
    thisArg?: unknown
  ) {
    const observed = this
    const target = toRaw(observed)
    const wrap = isReadonly ? toReadonly : shallow ? toShallow : toReactive
    !isReadonly && track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
    // important: create sure the callback is
    // 1. invoked with the reactive map as `this` and 3rd arg
    // 2. the value received should be a corresponding reactive/readonly.
    function wrappedCallback(value: unknown, key: unknown) {
      return callback.call(thisArg, wrap(value), wrap(key), observed)
    }
    return getProto(target).forEach.call(target, wrappedCallback)
  }
}
  • createIterableMethod 方法 主要是对集合中的迭代进行代理,[‘keys’, ‘values’, ‘entries’, Symbol.iterator] 主要是这四个方法。
const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
iteratorMethods.forEach(method => {
  mutableInstrumentations[method as string] = createIterableMethod(
    method,
    false,
    false
  )
  readonlyInstrumentations[method as string] = createIterableMethod(
    method,
    true,
    false
  )
  shallowInstrumentations[method as string] = createIterableMethod(
    method,
    true,
    true
  )
})
  • 可以看到,这个方法也会触发 TrackOpTypes.ITERATE 类型的 track,同样也会在遍历的时候对值进行 wrap,需要主要的是,这个方法主要是 iterator protocol 进行一个 polyfill, 所以需要实现同样的接口方便外部进行迭代。
function createIterableMethod(
  method: string | symbol,
  isReadonly: boolean,
  shallow: boolean
) {
  return function(this: IterableCollections, ...args: unknown[]) {
    const target = toRaw(this)
    const isMap = target instanceof Map
    const isPair = method === 'entries' || (method === Symbol.iterator && isMap)
    const isKeyOnly = method === 'keys' && isMap
    const innerIterator = getProto(target)[method].apply(target, args)
    const wrap = isReadonly ? toReadonly : shallow ? toShallow : toReactive
    !isReadonly &&
      track(
        target,
        TrackOpTypes.ITERATE,
        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
      )
    // return a wrapped iterator which returns observed versions of the
    // values emitted from the real iterator
    return {
      // iterator protocol
      next() {
        const { value, done } = innerIterator.next()
        return done
          ? { value, done }
          : {
              value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
              done
            }
      },
      // iterable protocol
      [Symbol.iterator]() {
        return this
      }
    }
  }
}
  • 总的来说对集合的代理,就是对集合方法的代理,在集合方法的执行的时候,进行不同类型的 key 的 track 或者 trigger。

ref 其实就是 reactive 包了一层,读取值要要通过 ref.value 进行读取,同时进行 track ,而设置值的时候,也会先判断相对于旧值是否有变化,有变化才进行设置,以及 trigger。话不多说,下面就进行 ref 的分析。

  • 通过 createRef 创建 ref,如果传入的 rawValue 本身就是一个 ref 的话,直接返回。
  • 而如果 shallow 为 false, 直接让 ref.value 等于 value,否则对 rawValue 进行 convert 转化成 reactive。可以看到 __v_isRef 标识 一个对象是否是 ref,读取 value 触发 track,设置 value 而且 newVal 的 toRaw 跟 原先的 rawValue 不一致,则进行设置,同样对于非 shallow 也进行 convert。
export function ref(value?: unknown) {
  return createRef(value)
}
const convert = <T extends unknown>(val: T): T =>
  isObject(val) ? reactive(val) : val
function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  let value = shallow ? rawValue : convert(rawValue)
  const r = {
    __v_isRef: true,
    get value() {
      track(r, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newVal) {
      if (hasChanged(toRaw(newVal), rawValue)) {
        rawValue = newVal
        value = shallow ? newVal : convert(newVal)
        trigger(
          r,
          TriggerOpTypes.SET,
          'value',
          __DEV__ ? { newValue: newVal } : void 0
        )
      }
    }
  }
  return r
}
  • triggerRef 手动触发 trigger ,对 shallowRef 可以由调用者手动触发。unref 则是反向操作,取出 ref 中的 value 值。
export function triggerRef(ref: Ref) {
  trigger(
    ref,
    TriggerOpTypes.SET,
    'value',
    __DEV__ ? { newValue: ref.value } : void 0
  )
}

export function unref<T>(ref: T): T extends Ref<infer V> ? V : T {
  return isRef(ref) ? (ref.value as any) : ref
}
  • toRefs 是将一个 reactive 对象或者 readonly 转化成 一个个 refs 对象,这个可以从 toRef 方法可以看出。
export function toRefs<T extends object>(object: T): ToRefs<T> {
  if (__DEV__ && !isProxy(object)) {
    console.warn(`toRefs() expects a reactive object but received a plain one.`)
  }
  const ret: any = {}
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  return ret
}

export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): Ref<T[K]> {
  return {
    __v_isRef: true,
    get value(): any {
      return object[key]
    },
    set value(newVal) {
      object[key] = newVal
    }
  } as any
}
  • 需要提到 baseHandlers 一点的是,对于非 shallow 模式中,对于 target 不是数组,会直接拿 ref.value 的值,而不是 ref。
 if (isRef(res)) {
      if (targetIsArray) {
        !isReadonly && track(target, TrackOpTypes.GET, key)
        return res
      } else {
        // ref unwrapping, only for Objects, not for Arrays.
        return res.value
      }
    }

而 set 中,如果对于 target 是对象,oldValue 是 ref, value 不是 ref,直接把 vlaue 设置给 oldValue.value

if (!shallow) {
      value = toRaw(value)
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
}
  • 需要注意的是, ref 还支持自定义 ref,就是又调用者手动去触发 track 或者 trigger,就是通过工厂模式生成我们的 ref 的 get 和 set
export type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T
  set: (value: T) => void
}

export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
  const { get, set } = factory(
    () => track(r, TrackOpTypes.GET, 'value'),
    () => trigger(r, TriggerOpTypes.SET, 'value')
  )
  const r = {
    __v_isRef: true,
    get value() {
      return get()
    },
    set value(v) {
      set(v)
    }
  }
  return r as any
}
  • 这个用法,我们可以在测试用例找到,
 const custom = customRef((track, trigger) => ({
  get() {
    track()
    return value
  },
  set(newValue: number) {
    value = newValue
    _trigger = trigger
  }
}))

computed 就是计算属性,可能会依赖其他 reactive 的值,同时会延迟和缓存计算值,具体怎么操作。show the code。需要注意的是,computed 不一定有 set 操作,因为可能是只读 computed。

  • 首先我们会对传入的 getterOrOptions 进行解析,如果是方法,说明是只读 computed,否则从 getterOrOptions 解析出 get 和 set 方法。
  • 紧接着,利用 getter 创建 runner effect,需要注意的 effect 的三个参数,第一是 lazy ,表明内部创建 effect 之后,不会立即执行。第二是 coumputed, 表明 computed 上游依赖改变的时候,会优先 trigger runner effect,而 runner 也不会在这时被执行的,原因看第三。第三,我们知道,effect 传入 scheduler 的时候, effect 会 trigger 的时候会调用 scheduler 而不是直接调用 effect。而在 computed 中,我们可以看到 trigger(computed, TriggerOpTypes.SET, ‘value’) 触发依赖 computed 的 effect 被重新收集依赖。同时因为 computed 是缓存和延迟计算,所以在依赖 computed effect 重新收集的过程中,runner 会在第一次计算 value,以及重新让 runner 被收集依赖。这也是为什么要 computed effect 的优先级要高的原因,因为让 依赖的 computed的 effect 重新收集依赖,以及让 runner 最早进行依赖收集,这样才能计算出最新的 computed 值。
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>

  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  let dirty = true
  let value: T
  let computed: ComputedRef<T>

  const runner = effect(getter, {
    lazy: true,
    // mark effect as computed so that it gets priority during trigger
    computed: true,
    scheduler: () => {
      if (!dirty) {
        dirty = true
        trigger(computed, TriggerOpTypes.SET, 'value')
      }
    }
  })
  computed = {
    __v_isRef: true,
    // expose effect so computed can be stopped
    effect: runner,
    get value() {
      if (dirty) {
        value = runner()
        dirty = false
      }
      track(computed, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newValue: T) {
      setter(newValue)
    }
  } as any
  return computed
}
  • 从上面可以看出,effect 有可能被多次调用,像下面中 value.foo++,会导致 effectFn 运行两次,因为同时被 effectFn 同时被 effectFn 和 c1 依赖了。PS: 下面这个测试用例是自己写的,不是 Vue 里面的。
it('should trigger once', () => {
    const value = reactive({ foo: 0 })
    const getter1 = jest.fn(() => value.foo)
    const c1 = computed(getter1)
    const effectFn = jest.fn(() => {
        value.foo
        c1.value
    })
    effect(effectFn)
    expect(effectFn).toBe(1)
    value.foo++
    // 原本以为是 2
    expect(effectFn).toHaveBeenCalledTimes(3)
  })
  • 对于 computed 暴露出来的 effect ,主要为了调用 effect 里面 stop 方法停止依赖收集。至此,响应式模块分析完毕。

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流