深度：1.1万字解读Vue3.0源码响应式系统

深藏阁楼爱情的钟 2022-10-22 07:36 44阅读 0赞

![81389b1c327b3714d7ffe32cfa51fba8.png][]

### 原文地址:https://hkc452.github.io/slamdunk-the-vue3/ ###

### 作者:KC ###

### 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 方法停止依赖收集。至此，响应式模块分析完毕。

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端算法源码编程群，每日一刷（工作日），每题瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

![64a27aff4f9b92ac98c8acc65bea11ef.png][]

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[81389b1c327b3714d7ffe32cfa51fba8.png]: /images/20221022/485d3c2010ae4710a8d0b42b6205949e.png
[64a27aff4f9b92ac98c8acc65bea11ef.png]: /images/20221022/c8a94c4712fb4808a094191dd2a6fa36.png