前言

学习 Vue3.0 源码必须对以下常识有所理解：

1. proxy reflect iterator
2. map weakmap set weakset symbol

这些常识能够看一下阮一峰老师的《ES6 入门教程》。

如果不会 ts，我感觉影响不大，理解一下泛型就能够了。因为我就没用过 TS，然而不影响看代码。

浏览源码，倡议先过一遍该模块下的 API，理解一下有哪些性能。而后再看一遍相干的单元测试，单元测试个别会把所有的性能细节都测一边。对源码的性能有所理解后，再去浏览源码的细节，成果更好。

proxy 术语

const p = new Proxy(target, handler)

• handler，蕴含捕获器（trap）的占位符对象，可译为处理器对象。
• target，被 Proxy 代理的对象。

情谊揭示

在浏览源码的过程中，要时刻问本人三个问题：

1. 这是什么？
2. 为什么要这样？为什么不那样？
3. 有没有更好的实现形式？

正所谓知其然，知其所以然。

浏览源码除了要理解一个库具备什么个性，还要理解它为什么要这样设计，并且要问本人能不能用更好的形式去实现它。
如果只是单纯的停留在“是什么”这个阶段，对你可能没有什么帮忙。就像看流水账似的，看完就忘，你得去思考，能力了解得更加粗浅。

注释

reactivity 模块是 Vue3.0 的响应式零碎，它有以下几个文件：

baseHandlers.ts
collectionHandlers.ts
computed.ts
effect.ts
index.ts
operations.ts
reactive.ts
ref.ts

接下来按重要水平程序来解说一下各个文件的 API 用法和实现。

reactive.ts 文件

在 Vue.2x 中，应用 Object.defineProperty() 对对象进行监听。而在 Vue3.0 中，改用 Proxy 进行监听。Proxy 比起 Object.defineProperty() 有如下劣势：

1. 能够监听属性的增删操作。
2. 能够监听数组某个索引值的变动以及数组长度的变动。

reactive()

reactive() 的作用次要是将指标转化为响应式的 proxy 实例。例如：

const obj = {count: 0}

const proxy = reactive(obj)

如果是嵌套的对象，会持续递归将子对象转为响应式对象。

reactive() 是向用户裸露的 API，它真正执行的是 createReactiveObject() 函数：

// 依据 target 生成 proxy 实例
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[ReactiveFlags.raw] &&
    !(isReadonly && target[ReactiveFlags.isReactive])
  ) {return target}
  // target already has corresponding Proxy
  if (hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
  ) {
    return isReadonly
      ? target[ReactiveFlags.readonly]
      : target[ReactiveFlags.reactive]
  }
  // only a whitelist of value types can be observed.
  if (!canObserve(target)) {return target}
 
  const observed = new Proxy(
    target,
    // 依据是否 Set, Map, WeakMap, WeakSet 来决定 proxy 的 handler 参数
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )
  // 在原始对象上定义一个属性（只读则为 "__v_readonly"，否则为 "__v_reactive"），这个属性的值就是依据原始对象生成的 proxy 实例。def(
    target,
    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
    observed
  )
  
  return observed
}

这个函数的解决逻辑如下：

1. 如果 target 不是一个对象，返回 target。
2. 如果 target 曾经是 proxy 实例，返回 target。
3. 如果 target 不是一个可察看的对象，返回 target。
4. 生成 proxy 实例，并在原始对象 target 上增加一个属性（只读则为 __v_readonly，否则为 __v_reactive），指向这个 proxy 实例，最初返回这个实例。增加这个属性就是为了在第 2 步做判断用的，避免对同一对象反复监听。

其中第 3、4 点须要独自拎进去讲一讲。

什么是可察看的对象

const canObserve = (value: Target): boolean => {
  return (!value[ReactiveFlags.skip] &&
    isObservableType(toRawType(value)) &&
    !Object.isFrozen(value)
  )
}

canObserve() 函数就是用来判断 value 是否是可察看的对象，满足以下条件才是可察看的对象：

1. ReactiveFlags.skip 的值不能为 __v_skip，__v_skip 是用来定义这个对象是否可跳过，即不监听。
2. target 的类型必须为下列值之一 Object,Array,Map,Set,WeakMap,WeakSet 才可被监听。
3. 不能是解冻的对象。

传递给 proxy 的处理器对象是什么

依据下面的代码能够看进去，在生成 proxy 实例时，处理器对象是依据一个三元表达式产生的：

// collectionTypes 的值为 Set, Map, WeakMap, WeakSet
collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers

这个三元表达式非常简单，如果是一般的对象 Object 或 Array，处理器对象就应用 baseHandlers；如果是 Set, Map, WeakMap, WeakSet 中的一个，就应用 collectionHandlers。

collectionHandlers 和 baseHandlers 是从 collectionHandlers.ts 和 baseHandlers.ts 处引入的，这里先放一放，接下来再讲。

有多少种 proxy 实例

createReactiveObject() 依据不同的参数，能够创立多种不同的 proxy 实例：

1. 齐全响应式的 proxy 实例，如果有嵌套对象，会递归调用 reactive()。
2. 只读的 proxy 实例。
3. 浅层响应的 proxy 实例，即一个对象只有第一层的属性是响应式的。
4. 只读的浅层响应的 proxy 实例。

浅层响应的 proxy 实例是什么？

之所以有浅层响应的 proxy 实例，是因为 proxy 只代理对象的第一层属性，更深层的属性是不会代理的。如果的确须要生成齐全响应式的 proxy 实例，就得递归调用 reactive()。不过这个过程是外部主动执行的，用户感知不到。

其余一些函数介绍

// 判断 value 是否是响应式的
export function isReactive(value: unknown): boolean {if (isReadonly(value)) {return isReactive((value as Target)[ReactiveFlags.raw])
  }
  return !!(value && (value as Target)[ReactiveFlags.isReactive])
}
// 判断 value 是否是只读的
export function isReadonly(value: unknown): boolean {return !!(value && (value as Target)[ReactiveFlags.isReadonly])
}
// 判断 value 是否是 proxy 实例
export function isProxy(value: unknown): boolean {return isReactive(value) || isReadonly(value)
}

// 将响应式数据转为原始数据，如果不是响应数据，则返回源数据
export function toRaw<T>(observed: T): T {
  return ((observed && toRaw((observed as Target)[ReactiveFlags.raw])) || observed
  )
}

// 给 value 设置 skip 属性，跳过代理，让数据不可被代理
export function markRaw<T extends object>(value: T): T {def(value, ReactiveFlags.skip, true)
  return value
}

baseHandlers.ts 文件

在 baseHandlers.ts 文件中针对 4 种 proxy 实例定义了不对的处理器。
因为它们之间差异不大，所以在这只解说齐全响应式的处理器对象：

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

处理器对五种操作进行了拦挡，别离是：

1. get 属性读取
2. set 属性设置
3. deleteProperty 删除属性
4. has 是否领有某个属性
5. ownKeys

其中 ownKeys 可拦挡以下操作：

1. Object.getOwnPropertyNames()
2. Object.getOwnPropertySymbols()
3. Object.keys()
4. Reflect.ownKeys()

其中 get、has、ownKeys 操作会收集依赖，set、deleteProperty 操作会触发依赖。

get

get 属性的处理器是用 createGetter() 函数创立的：

// /*#__PURE__*/ 标识此为纯函数 不会有副作用 不便做 tree-shaking
const get = /*#__PURE__*/ createGetter()

function createGetter(isReadonly = false, shallow = false) {return function get(target: object, key: string | symbol, receiver: object) {
    // target 是否是响应式对象
    if (key === ReactiveFlags.isReactive) {
      return !isReadonly
      // target 是否是只读对象
    } else if (key === ReactiveFlags.isReadonly) {return isReadonly} else if (
      // 如果拜访的 key 是 __v_raw，并且 receiver == target.__v_readonly || receiver == target.__v_reactive
      // 则间接返回 target
      key === ReactiveFlags.raw &&
      receiver ===
        (isReadonly
          ? (target as any).__v_readonly
          : (target as any).__v_reactive)
    ) {return target}

    const targetIsArray = isArray(target)
    // 如果 target 是数组并且 key 属于三个办法之一 ['includes', 'indexOf', 'lastIndexOf']，即触发了这三个操作之一
    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 不论 Proxy 怎么批改默认行为，你总能够在 Reflect 上获取默认行为。// 如果不必 Reflect 来获取，在监听数组时能够会有某些中央会出错
    // 具体请看文章《Vue3 中的数据侦测》——https://juejin.im/post/5d99be7c6fb9a04e1e7baa34#heading-10
    const res = Reflect.get(target, key, receiver)

    // 如果 key 是 symbol 并且属于 symbol 的内置办法之一，或者拜访的是原型对象，间接返回后果，不收集依赖。if ((isSymbol(key) && builtInSymbols.has(key)) || key === '__proto__') {return res}

    // 只读对象不收集依赖
    if (!isReadonly) {track(target, TrackOpTypes.GET, key)
    }
    
    // 浅层响应立刻返回，不递归调用 reactive()
    if (shallow) {return res}

    // 如果是 ref 对象，则返回真正的值，即 ref.value，数组除外。if (isRef(res)) {
      // ref unwrapping, only for Objects, not for Arrays.
      return targetIsArray ? res : res.value
    }

    if (isObject(res)) {// 因为 proxy 只能代理一层，所以 target[key] 的值如果是对象，就持续对其进行代理
      return isReadonly ? readonly(res) : reactive(res)
    }

    return res
  }
}

这个函数的解决逻辑看代码正文应该就能明确，其中有几个点须要独自说一下：

1. Reflect.get()
2. 数组的解决
3. builtInSymbols.has(key) 为 true 或原型对象不收集依赖

Reflect.get()

Reflect.get() 办法与从对象 (target[key]) 中读取属性相似，但它是通过一个函数执行来操作的。

为什么间接用 target[key] 就能失去值，却还要用 Reflect.get(target, key, receiver) 来多倒一手呢？

先来看个简略的示例：

const p = new Proxy([1, 2, 3], {get(target, key, receiver) {return target[key]
    },
    set(target, key, value, receiver) {target[key] = value
    }
})

p.push(100)

运行这段代码会报错：

Uncaught TypeError: 'set' on proxy: trap returned falsish for property '3'

但做一些小改变就可能失常运行：

const p = new Proxy([1, 2, 3], {get(target, key, receiver) {return target[key]
    },
    set(target, key, value, receiver) {target[key] = value
        return true // 新增一行 return true
    }
})

p.push(100)

这段代码能够失常运行。为什么呢？

区别在于新的这段代码在 set() 办法上多了一个 return true。我在 MDN 上查找到的解释是这样的：

set() 办法该当返回一个布尔值。

• 返回 true 代表属性设置胜利。
• 在严格模式下，如果 set() 办法返回 false，那么会抛出一个 TypeError 异样。

这时我又试了一下间接执行 p[3] = 100，发现能失常运行，只有执行 push 办法才报错。到这一步，我心中曾经有答案了。为了验证我的猜测，我在代码上加了 console.log()，把代码执行过程的一些属性打印进去。

const p = new Proxy([1, 2, 3], {get(target, key, receiver) {console.log('get:', key)
        return target[key]
    },
    set(target, key, value, receiver) {console.log('set:', key, value)
        target[key] = value
        return true
    }
})

p.push(100)

// get:  push
// get:  length
// set:  3 100
// set:  length 4

从下面的代码能够发现执行 push 操作时，还会拜访 length 属性。揣测执行过程如下：依据 length 的值，得出最初的索引，再设置新的置，最初再扭转 length。

联合 MDN 的解释，我的揣测是数组的原生办法应该是运行在严格模式下的（如果有网友晓得假相，请在评论区留言）。因为在 JS 中很多代码在非严格模式和严格模式下都能失常运行，只是严格模式会给你报个错。就跟这次状况一样，最初设置 length 属性的时候报错，但后果还是失常的。如果不想报错，就得每次都返回 true。

而后再看一下 Reflect.set() 的返回值阐明：

返回一个 Boolean 值表明是否胜利设置属性。

所以下面代码能够改成这样：

const p = new Proxy([1, 2, 3], {get(target, key, receiver) {console.log('get:', key)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {console.log('set:', key, value)
        return Reflect.set(target, key, value, receiver)
    }
})

p.push(100)

另外，不论 Proxy 怎么批改默认行为，你总能够在 Reflect 上获取默认行为。

通过下面的示例，不难理解为什么要通过 Reflect.set() 来代替 Proxy 实现默认操作了。同理，Reflect.get() 也一样。

数组的解决

// 如果 target 是数组并且 key 属于三个办法之一 ['includes', 'indexOf', 'lastIndexOf']，即触发了这三个操作之一
if (targetIsArray && hasOwn(arrayInstrumentations, key)) {return Reflect.get(arrayInstrumentations, key, receiver)
}

在执行数组的 includes, indexOf, lastIndexOf 办法时，会把指标对象转为 arrayInstrumentations 再执行。

const arrayInstrumentations: Record<string, Function> = {}
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {arrayInstrumentations[key] = function(...args: any[]): any {
    // 如果 target 对象中指定了 getter，receiver 则为 getter 调用时的 this 值。// 所以这里的 this 指向 receiver，即 proxy 实例，toRaw 为了获得原始数据
    const arr = toRaw(this) as any
    // 对数组的每个值进行 track 操作，收集依赖
    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)
    // 参数有可能是响应式的，函数执行后返回值为 -1 或 false，那就用参数的原始值再试一遍
    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}
  }
})

从上述代码能够看出，Vue3.0 对 includes, indexOf, lastIndexOf 进行了封装，除了返回原有办法的后果外，还会对数组的每个值进行依赖收集。

builtInSymbols.has(key) 为 true 或原型对象不收集依赖

const p = new Proxy({}, {get(target, key, receiver) {console.log('get:', key)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {console.log('set:', key, value)
        return Reflect.set(target, key, value, receiver)
    }
})

p.toString() // get:  toString
             // get:  Symbol(Symbol.toStringTag)
p.__proto__  // get:  __proto__

从 p.toString() 的执行后果来看，它会触发两次 get，一次是咱们想要的，一次是咱们不想要的（我还没搞明确为什么会有 Symbol(Symbol.toStringTag)，如果有网友晓得，请在评论区留言）。所以就有了这个判断：builtInSymbols.has(key) 为 true 就间接返回，避免反复收集依赖。

再看 p.__proto__ 的执行后果，也触发了一次 get 操作。一般来说，没有场景须要独自拜访原型，拜访原型都是为了拜访原型上的办法，例如 p.__proto__.toString() 这样应用，所以 key 为 __proto__ 的时候也要跳过，不收集依赖。

set

const set = /*#__PURE__*/ createSetter()

// 参考文档《Vue3 中的数据侦测》——https://juejin.im/post/5d99be7c6fb9a04e1e7baa34#heading-10
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)
      // 如果原来的值是 ref，但新的值不是，将新的值赋给 ref.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}

    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) {
        // 如果 target 没有 key，就代表是新增操作，须要触发依赖
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        // 如果新旧值不相等，才触发依赖
        // 什么时候会有新旧值相等的状况？例如监听一个数组，执行 push 操作，会触发屡次 setter
        // 第一次 setter 是新加的值 第二次是因为新加的值导致 length 扭转
        // 但因为 length 也是本身属性，所以 value === oldValue
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

set() 的函数解决逻辑反而没那么难，看正文即可。track() 和 trigger() 将放在上面和 effect.ts 文件一起解说。

deleteProperty、has、ownKeys

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)
  // 如果删除后果为 true 并且 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)
}

这三个函数比较简单，看代码即可。

effect.ts 文件

等把 effect.ts 文件解说完，响应式模块基本上差不多完结了。

effect()

effect() 次要和响应式的对象联合应用。

export function effect<T = any>(fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  // 如果曾经是 effect 函数，获得原来的 fn
  if (isEffect(fn)) {fn = fn.raw}
  
  const effect = createReactiveEffect(fn, options)
  // 如果 lazy 为 false，马上执行一次
  // 计算属性的 lazy 为 true
  if (!options.lazy) {effect()
  }
  
  return effect
}

真正创立 effect 的是 createReactiveEffect() 函数。

let uid = 0

function createReactiveEffect<T = any>(fn: (...args: any[]) => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {// reactiveEffect() 返回一个新的 effect，这个新的 effect 执行后
  // 会将本人设为 activeEffect，而后再执行 fn 函数，如果在 fn 函数里对响应式属性进行读取
  // 会触发响应式属性 get 操作，从而收集依赖，而收集的这个依赖函数就是 activeEffect
  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 {
        // track 将依赖函数 activeEffect 增加到对应的 dep 中，而后在 finally 中将 activeEffect
        // 重置为上一个 effect 的值
        effectStack.pop()
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
        
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect._isEffect = true
  effect.active = true // 用于判断以后 effect 是否激活，有一个 stop() 来将它设为 false
  effect.raw = fn
  effect.deps = []
  effect.options = options
  
  return effect
}

其中 cleanup(effect) 的作用是让 effect 关联下的所有 dep 实例清空 effect，即革除这个依赖函数。

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
  }
}

从代码中能够看进去，真正的依赖函数是 activeEffect。执行 track() 收集的依赖就是 activeEffect。
趁热打铁，当初咱们再来看一下 track() 和 trigger() 函数。

track()

// 依赖收集
export function track(target: object, type: TrackOpTypes, key: unknown) {
  // activeEffect 为空，代表没有依赖，间接返回
  if (!shouldTrack || activeEffect === undefined) {return}
  // targetMap 依赖管理中心，用于收集依赖和触发依赖
  let depsMap = targetMap.get(target)
  // targetMap 为每个 target 建设一个 map
  // 每个 target 的 key 对应着一个 dep
  // 而后用 dep 来收集依赖函数，当监听的 key 值发生变化时，触发 dep 中的依赖函数
  // 相似于这样
  // targetMap(weakmap) = {//     target1(map): {//       key1(dep): (fn1,fn2,fn3...)
  //       key2(dep): (fn1,fn2,fn3...)
  //     },
  //     target2(map): {//       key1(dep): (fn1,fn2,fn3...)
  //       key2(dep): (fn1,fn2,fn3...)
  //     },
  // }
  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)
    // 开发环境下会触发 onTrack 事件
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

targetMap 是一个 WeakMap 实例。

WeakMap 对象是一组键 / 值对的汇合，其中的键是弱援用的。其键必须是对象，而值能够是任意的。

弱援用是什么意思呢？

let obj = {a: 1}
const map = new WeakMap()
map.set(obj, '测试')
obj = null

当 obj 置为空后，对于 {a: 1} 的援用曾经为零了，下一次垃圾回收时就会把 weakmap 中的对象回收。

但如果把 weakmap 换成 map 数据结构，即便把 obj 置空，{a: 1} 仍然不会被回收，因为 map 数据结构是强援用，它当初还被 map 援用着。

trigger()

// 触发依赖
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
  }
  
  // 对收集的依赖进行分类，分为一般的依赖或计算属性依赖
  // effects 收集的是一般的依赖 computedRunners 收集的是计算属性的依赖
  // 两个队列都是 set 构造，为了防止反复收集依赖
  const effects = new Set<ReactiveEffect>()
  const computedRunners = new Set<ReactiveEffect>()
  
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        // effect !== activeEffect 防止反复收集依赖
        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
        }
      })
    }
  }

  // 在值被清空前，往相应的队列增加 target 所有的依赖
  if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    depsMap.forEach(add)
  } else if (key === 'length' && isArray(target)) { // 当数组的 length 属性变动时触发
    depsMap.forEach((dep, key) => {if (key === 'length' || key >= (newValue as number)) {add(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    // 如果不合乎以上两个 if 条件，并且 key !== undefined，往相应的队列增加依赖
    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))
    }
  }

  const run = (effect: ReactiveEffect) => {if (__DEV__ && effect.options.onTrigger) {
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    if (effect.options.scheduler) {
      // 如果 scheduler 存在则调用 scheduler，计算属性领有 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() 中的 type 有什么用？

这个 type 取值范畴就定义在 operations.ts 文件中：

// track 的类型
export const enum TrackOpTypes {
  GET = 'get', // get 操作
  HAS = 'has', // has 操作
  ITERATE = 'iterate' // ownKeys 操作
}

// trigger 的类型
export const enum TriggerOpTypes {
  SET = 'set', // 设置操作，将旧值设置为新值
  ADD = 'add', // 新增操作，增加一个新的值 例如给对象新增一个值 数组的 push 操作
  DELETE = 'delete', // 删除操作 例如对象的 delete 操作，数组的 pop 操作
  CLEAR = 'clear' // 用于 Map 和 Set 的 clear 操作。}

type 次要用于标识 track() 和 trigger() 的类型。

trigger() 中的间断判断代码

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))
}

在 trigger() 中有这么一段间断判断的代码，它们作用是什么呢？其实它们是用于判断数组 / 汇合这种数据结构比拟特地的操作。
看个示例：

let dummy
const counter = reactive([])
effect(() => (dummy = counter.join()))
counter.push(1)

effect(() => (dummy = counter.join())) 生成一个依赖，并且自执行一次。
在执行函数里的代码 counter.join() 时，会拜访数组的多个属性，别离是 join 和 length，同时触发 track() 收集依赖。 也就是说，数组的 join length 属性都收集了一个依赖。

当执行 counter.push(1) 这段代码时，实际上是将数组的索引 0 对应的值设为 1。这一点，能够通过打 debugger 从上下文环境看进去，其中 key 为 0，即数组的索引，值为 1。

设置值后，因为是新增操作，执行 trigger(target, TriggerOpTypes.ADD, key, value)。但由上文可知，只有数组的 key 为 join length 时，才有依赖，key 为 0 是没有依赖的。

从下面两个图能够看进去，只有 join length 属性才有对应的依赖。

这个时候，trigger() 的一连串 if 语句就起作用了，其中有一个 if 语句是这样的：

if (
  isAddOrDelete ||
  (type === TriggerOpTypes.SET && target instanceof Map)
) {add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))
}

如果 target 是一个数组，就增加 length 属性对应的依赖到队列中。也就是说 key 为 0 的状况下应用 length 对应的依赖。

另外，还有一个奇妙的中央。待执行依赖的队列是一个 set 数据结构。如果 key 为 0 有对应的依赖，同时 length 也有对应的依赖，就会增加两次依赖，但因为队列是 set，具备主动去重的成果，防止了反复执行。

示例

仅看代码和文字，是很难了解响应式数据和 track() trigger() 是怎么配合的。所以咱们要配合示例来了解：

let dummy
const counter = reactive({num: 0})
effect(() => (dummy = counter.num))

console.log(dummy == 0)
counter.num = 7
console.log(dummy == 7)

上述代码执行过程如下：

1. 对 {num: 0} 进行监听，返回一个 proxy 实例，即 counter。
2. effect(fn) 创立一个依赖，并且在创立时会执行一次 fn。
3. fn() 读取 num 的值，并赋值给 dummy。
4. 读取属性这个操作会触发 proxy 的属性读取拦挡操作，在拦挡操作里会去收集依赖，这个依赖是步骤 2 产生的。
5. counter.num = 7 这个操作会触发 proxy 的属性设置拦挡操作，在这个拦挡操作里，除了把新的值返回，还会触发方才收集的依赖。在这个依赖里把 counter.num 赋值给 dummy(num 的值曾经变为 7)。

用图来示意，大略这样的：

collectionHandlers.ts 文件

collectionHandlers.ts 文件蕴含了 Map WeakMap Set WeakSet 的处理器对象，别离对应齐全响应式的 proxy 实例、浅层响应的 proxy 实例、只读 proxy 实例。这里只解说对应齐全响应式的 proxy 实例的处理器对象：

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

为什么只监听 get 操作，set has 等操作呢？不焦急，先看一个示例：

const p = new Proxy(new Map(), {get(target, key, receiver) {console.log('get:', key)
        return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {console.log('set:', key, value)
        return Reflect.set(target, key, value, receiver)
    }
})

p.set('ab', 100) // Uncaught TypeError: Method Map.prototype.set called on incompatible receiver [object Object]

运行下面的代码会报错。其实这和 Map Set 的外部实现无关，必须通过 this 能力拜访它们的数据。然而通过 Reflect 反射的时候，target 外部的 this 其实是指向 proxy 实例的，所以就不难理解为什么会报错了。

那怎么解决这个问题？通过源码能够发现，在 Vue3.0 中是通过代理的形式来实现对 Map Set 等数据结构监听的：

function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
  const instrumentations = shallow
    ? shallowInstrumentations
    : isReadonly
      ? readonlyInstrumentations
      : mutableInstrumentations

  return (
    target: CollectionTypes,
    key: string | symbol,
    receiver: CollectionTypes
  ) => {
    // 这三个 if 判断和 baseHandlers 的解决形式一样
    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
    )
  }
}

把最初一行代码简化一下：

target = hasOwn(instrumentations, key) && key in target? instrumentations : target
return Reflect.get(target, key, receiver);

其中 instrumentations 的内容是：

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)
}

从代码能够看到，原来真正的处理器对象是 mutableInstrumentations。当初再看一个示例：

const proxy = reactive(new Map())
proxy.set('key', 100)

生成 proxy 实例后，执行 proxy.set('key', 100)。proxy.set 这个操作会触发 proxy 的属性读取拦挡操作。

打断点能够看到，此时的 key 为 set。拦挡了 set 操作后，调用 Reflect.get(target, key, receiver)，这个时候的 target 曾经不是原来的 target 了，而是 mutableInstrumentations 对象。也就是说，最终执行的是 mutableInstrumentations.set()。

接下来再看看 mutableInstrumentations 的各个处理器逻辑。

get

// 如果 value 是对象，则返回一个响应式对象（`reactive(value)`)，否则间接返回 value。const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value) : value
  
get(this: MapTypes, key: unknown) {
    // this 指向 proxy
    return get(this, key, toReactive)
}
  
function get(
  target: MapTypes,
  key: unknown,
  wrap: typeof toReactive | typeof toReadonly | typeof toShallow
) {target = toRaw(target)
  const rawKey = toRaw(key)
  // 如果 key 是响应式的，额定收集一次依赖
  if (key !== rawKey) {track(target, TrackOpTypes.GET, key)
  }
  track(target, TrackOpTypes.GET, rawKey)
  // 应用 target 原型上的办法
  const {has, get} = getProto(target)
  // 原始 key 和响应式的 key 都试一遍
  if (has.call(target, key)) {
    // 读取的值要应用包装函数解决一下
    return wrap(get.call(target, key))
  } else if (has.call(target, rawKey)) {return wrap(get.call(target, rawKey))
  }
}

get 的解决逻辑很简略，拦挡 get 之后，调用 get(this, key, toReactive)。

set

function set(this: MapTypes, key: unknown, value: unknown) {value = toRaw(value)
  // 获得原始数据
  const target = toRaw(this)
  // 应用 target 原型上的办法
  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)
  // 避免反复触发依赖，如果 key 已存在就不触发依赖
  if (!hadKey) {trigger(target, TriggerOpTypes.ADD, key, value)
  } else if (hasChanged(value, oldValue)) {
    // 如果新旧值相等，也不会触发依赖
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
  }
  return result
}

set 的解决逻辑也较为简单，配合正文高深莫测。

还有剩下的 has add delete 等办法就不解说了，代码行数比拟少，逻辑也很简略，倡议自行浏览。

ref.ts 文件

const convert = <T extends unknown>(val: T): T =>
  isObject(val) ? reactive(val) : val
  
export function ref(value?: unknown) {return createRef(value)
}
  
function createRef(rawValue: unknown, shallow = false) {
  // 如果曾经是 ref 对象了，间接返回原值
  if (isRef(rawValue)) {return rawValue}
  
  // 如果不是浅层响应并且 rawValue 是个对象，调用 reactive(rawValue)
  let value = shallow ? rawValue : convert(rawValue)
  
  const r = {
    __v_isRef: true, // 用于标识这是一个 ref 对象，避免反复监听 ref 对象
    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
}

在 Vue2.x 中，根本数值类型是不能监听的。但在 Vue3.0 中通过 ref() 能够实现这一成果。

const r = ref(0)
effect(() => console.log(r.value)) // 打印 0
r.value++ // 打印 1

ref() 会把 0 转成一个 ref 对象。如果给 ref(value) 传的值是个对象，在函数外部会调用 reactive(value) 将其转为 proxy 实例。

computed.ts 文件

export function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>
export function computed<T>(getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
  // 如果 getterOrOptions 是个函数，则是不可被配置的，setter 设为空函数
  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    // 如果是个对象，则可读可写
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  // dirty 用于判断计算属性依赖的响应式属性有没有被扭转
  let dirty = true
  let value: T
  let computed: ComputedRef<T>

  const runner = effect(getter, {
    lazy: true, // lazy 为 true，生成的 effect 不会马上执行
    // mark effect as computed so that it gets priority during trigger
    computed: true,
    scheduler: () => { // 调度器
      // trigger 时，计算属性执行的是 effect.options.scheduler(effect) 而不是 effect()
      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
}

上面通过一个示例，来解说一下 computed 是怎么运作的：

const value = reactive({})
const cValue = computed(() => value.foo)
console.log(cValue.value === undefined)
value.foo = 1
console.log(cValue.value === 1)

1. 生成一个 proxy 实例 value。
2. computed() 生成计算属性对象，当对 cValue 进行取值时（cValue.value），依据 dirty 判断是否须要运行 effect 函数进行取值，如果 dirty 为 false，间接把值返回。
3. 在 effect 函数里将 effect 设为 activeEffect，并运行 getter(() => value.foo) 取值。在取值过程中，读取 foo 的值（value.foo）。
4. 这会触发 get 属性读取拦挡操作，进而触发 track 收集依赖，而收集的依赖函数就是第 3 步产生的 activeEffect。
5. 当响应式属性进行从新赋值时（value.foo = 1），就会 trigger 这个 activeEffect 函数。
6. 而后调用 scheduler() 将 dirty 设为 true，这样 computed 下次求值时会从新执行 effect 函数进行取值。

index.ts 文件

index.ts 文件向外导出 reactivity 模块的 API。

参考资料

• Vue3 中的数据侦测
• vue3 响应式源码解析 -Reactive 篇
• vue3 响应式零碎源码解析 -Effect 篇