前言

學習 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篇