「不容錯過」2.7萬字手摸手解讀Vue3.0源碼響應式系統

原文地址: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。vue
那麼createReactiveEffect是怎樣是建立 effect的呢？react

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，惟一標識effectgit
_isEffect 用於標識方法是不是effectgithub
active effect 是否激活web
raw 建立effect是傳入的fn數組
deps 持有當前 effect 的dep 數組緩存
options 建立effect是傳入的options微信
回到 reactiveEffect，若是 effect 不是激活狀態，這種狀況發生在咱們調用了 effect 中的 stop 方法以後，那麼先前沒有傳入調用 scheduler 函數的話，直接調用原始方法fn，不然直接返回。app
那麼處於激活狀態的 effect 要怎麼進行處理呢？首先判斷是否當前 effect 是否在 effectStack 當中，若是在，則不進行調用，這個主要是爲了不死循環。拿下面測試用例來看less

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 方法中止依賴收集。至此，響應式模塊分析完畢。

最後

^{若是你喜歡探討技術，或者對本文有任何的意見或建議，很是歡迎加魚頭微信好友一塊兒探討，固然，魚頭也很是但願能跟你一塊兒聊生活，聊愛好，談天說地。魚頭的微信號是：krisChans95 也能夠掃碼關注公衆號，訂閱更多精彩內容。}

本文分享自微信公衆號 - 魚頭的Web海洋（krissarea）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。