petite-vue原始碼剖析-逐行解讀@vue/reactivity之reactive

肥仔John發表於2022-03-22
Vue原始碼React

在petite-vue中我們通過reactive構建上下文物件，並將根據狀態渲染UI的邏輯作為入參傳遞給effect，然後神奇的事情發生了，當狀態發生變化時將自動觸發UI重新渲染。那麼到底這是怎麼做到的呢？
@vue/reactivity功能十分豐富，而petite-vue僅使用到reactive和effect兩個最基本的API，作為入門本文將僅僅對這兩個API進行原始碼解讀。

一切源於Proxy

我們知道Vue2是基於Object.defineProperty攔截物件屬性的讀寫操作，從而實現依賴收集和響應式UI渲染。而@vue/reactivity作為Vue3的子專案，採用的是ES6的Proxy介面實現這一功能。

const state = {
  count: 1
}

const proxyState = new Proxy(state, {
  get(target: T, property: string, receiver?: T | Proxy): any {
    // 攔截讀操作
    console.log('get')
    return Reflect.get(target, property, receiver)
  },
  set(target: T, property: string, value: any, receiver?: T | Proxy): boolean {
    // 攔截寫操作
    console.log('set')
    return Reflect.set(target, property, value, receiver)
  },
  deleteProperty(target, prop) {
    // 攔截屬性刪除操作
    console.log('delete')
    delete target[prop]
    return true
  }
})

相對Object.defineProperty，Proxy的特點：

  1. 通過new Proxy構建的物件進行操作才能攔截物件屬性的讀寫操作，而被代理的物件則沒有任何變化；
  2. 可以監聽陣列元素的變化和增減；
  3. 可以監聽物件屬性的增減；
  4. Proxy可以逐層代理物件屬性，而Object.defineProperty則需要一次性代理物件所有層級的屬性。

響應式程式設計

// 定義響應式物件
const state = reactive({
  num1: 1,
  num2: 2
})

// 在副作用函式中訪問響應式物件屬性，當這些屬性發生變化時副作用函式將被自動呼叫
effect(() => {
  console.log('outer', state.num1)
  effect(() => {
    console.log('inner', state.num2)
  })
})
// 回顯 outer 1
// 回顯 inner 2

state.num2 += 1
// 回顯 inner 3

state.num1 += 1
// 回顯 outer 2
// 回顯 inner 3

state.num2 += 1
// 回顯 inner 4
// 回顯 inner 4

本篇我們將從reactive入手，解讀Vue3到底如何構造一個響應式物件。

深入reactive的工作原理

@vue/reactivity的原始碼位於vue-next專案的packages/reactivity下，而reactive函式則位於其下的src/reactive.ts檔案中。該檔案中除了包含reactive函式外，還包含如shallowReactive、readonly、shallowReadonly和其它幫助函式。
而reactive核心工作則是通過Proxy將一個普通的JavaScript物件轉換為監控物件，攔截物件屬性的讀寫刪操作，並收集依賴該物件（屬性）的副作用函式。大致流程如下：

  1. 通過reactive構造的響應式物件都會將被代理物件和響應式物件的對映關係儲存在reactiveMap，防止重複生成響應式物件，優化效能;
  2. 當呼叫reactive後會對被代理物件進行檢查，若不是隻讀物件、響應式物件、primitive value和reactiveMap中不存在則根據被代理物件的型別構造響應式物件
  3. 攔截讀操作(get,has和ownKeys)時呼叫effect.ts中的track收集依賴
  4. 攔截寫操作(set, deleteProperty)時呼叫effect.ts中的trigger觸發副作用函式執行

下面我們一起逐行理解原始碼吧！

原始碼解讀——reactive入口

// Vue3內部定義的物件特性標識
export const enum ReactiveFlags {
  SKIP = '__v_skip', // 標識該物件不被代理
  IS_REACTIVE = '__v_isReactive', // 標識該物件是響應式物件
  IS_READONLY = '__v_isReadonly', // 標識該物件為只讀物件
  RAW = '__v_raw' // 指向被代理的JavaScript物件
}

// 響應式物件的介面
export interface Target {
  [ReactiveFlags.SKIP]?: boolean
  [ReactiveFlags.IS_REACTIVE]?: boolean
  [ReactiveFlags.IS_READONLY]?: boolean
  [ReactiveFlags.RAW]?: any // 用於指向被代理的JavaScript物件
}

// 用於快取被代理物件和代理物件的關係，防止重複代理
export const reactiveMap = new WeakMap<Target, any>()

// 將被代理物件的處理方式分為不代理(INVALID)、普通物件和陣列(COMMON)和Map、Set(COLLECTION)
const enum TargetType {
  INVALID = 0,
  COMMON = 1,
  COLLECTION = 2,
}

function targetTypeMap(rawType: string) {
  switch(rawType) {
    case 'Object':
    case 'Array':
      return TargetType.COMMON
    case 'Map':
    case 'Set':
    case 'WeakMap':
    case 'WeakSet':
      return TargetType.COLLECTION
    default:
      return TargetType.INVALID
  }
}

function getTargetType(value: Target) {
  // 若物件標記為跳過，或不可擴充套件則不代理該物件
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
    ? TargetType.INVALID
    // 根據型別決定處理方式
    : targetTypeMap(toRawType(value))
}

export function reative(target: object) {
  // 不攔截只讀物件的讀寫刪操作
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

function createReactiveObject (
  target: Target,
  isReadonly: boolean,
  beaseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // reactive函式入參必須是JavaScript物件或陣列，若是primitive value則會直接返回primitive value
  if (!isObject(target)) {
    return target
  }
  /**
   * 1. 僅能對非響應式和非只讀物件構造響應式物件
   * 2. 可以對非只讀物件構造響應式物件
   */
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // 若物件已被代理過，則直接返回對應的代理物件
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // 根據被代理的物件型別決定採用哪種代理方式
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy (
    target,
    targetType == TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

可以看到reactive方法中會對被代理物件進行各種檢查，從而減少不必要的操作提高效能。最後若被代理物件的型別為Object或Array則採用baseHandlers生成代理，否則使用collectionHandlers生成代理。

原始碼解讀-代理Object和Array的baseHandlers

//檔案 ./baseHandlers.ts

// /*#__PURE__*/用於告訴webpack等bundler工具後面緊跟的函式是純函式，若沒被呼叫過則可以採用tree-shaking移除掉該函式
const get = /*#__PURE__*/ createGetter()

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

我們首先看看是如何攔截讀操作吧

攔截讀操作

攔截讀操作核心是收集依賴所讀屬性的輔作用函式的資訊，具體流程邏輯是

  1. 對於Vue3內部屬性的讀操作，即返回對應的值而不用收集依賴
  2. 對於陣列內建方法的讀操作，需要改寫這些內建方法用於在呼叫該方法前對陣列元素進行依賴收集，或解決一些邊界問題
  3. 對於內建Symbol屬性和其它Vue3內部屬性的讀操作，直接返回原始值且不用收集依賴
  4. 對於非只讀物件的除上述外的其餘屬性的讀操作，執行依賴收集(核心邏輯)
  5. 若淺層響應式物件則直接返回屬性值，否則若屬性值為物件，則將其構造為響應式物件(reactive)或只讀物件(readonly)
//檔案 ./baseHandlers.ts

/**
 * isNonTrackableKeys = {'__proto__': true, '__v_isRef': true, '__isVue': true}
 */
const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`)

// 內建的Symbol例項包含：hasInstance, isConcatSpreadable, iterator, asyncIterator, match, matchAll, replace, search, split, toPrimitive, toStringTag, species, unscopables
const builtInSymbols = new Set(
  Object.getOwnPropertyNames(Symbol)
    .map(key => (Symbol as any)[key])
    .filter(isSymbol)
)

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    // 處理Vue3內部屬性名(`__v_isReactive`, `__v_isReadonly`, `__v_raw`)的值
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    }
    else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    }
    // TODO
    else if (
      key === ReactiveFlags.RAW &&
      receiver === reactiveMap
    ) {
      return target
    }

    // 如果key是includes,indexOf,lastIndexOf,push,pop,shift,unshift,splice時則返回能跟蹤依賴變化的版本
    const targetIsArray = isArray(target)
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }

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

    // 不攔截內建Symbol屬性和__proto__,__v_isRef和__isVue屬性
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }

    // 收集依賴該屬性的副作用函式
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    // 如果是構建ShallowReactive則不會基於屬性值構造響應式式物件
    if (shallow) {
      return res
    }

    /* 對於屬性值為@vue/reactivity的Ref例項時，如果不是執行[1,2,3][0]的操作則返回Ref例項包含的primitive value，否則返回Ref例項
     * 因此我們在effect updator中可以通過如下方式直接獲取Ref例項屬性的primitive value
     * const age = ref(0), state = reactive({ age })
     * console.log(age.value) // 回顯0
     * effect(() => { console.log(state.age) }) // 回顯0
     */
    if (isRef(res)) {
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? res.value : res
    }

    // 若屬性值不是primitive value或BOM，則基於屬性值構造響應式物件
    if (isObject(res)) {
      return isReadonly ? readonly(res) :  reactive(res)
    }
  }
}

這裡可以看到當讀取屬性時才根據屬性值型別來為屬性值構造響應式物件，而不是當我們呼叫reactive時就一股腦的遍歷物件所有屬性，併為各個屬性構建響應式物件。

另外，針對includes等陣列操作會返回對應的能跟蹤依賴變化的版本，到底什麼是能跟蹤依賴變化的版本呢？

// 檔案 ./baseHandlers.ts

const arrayInstrumentations = /*#__PURE__*/ createArrayInstrumentations()

function createArrayInstrumentations() {
  const instrumentations: Record<string, Function> = {}
  ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
    instrumentations[key] = function(this: unknown[], ...args: unknown[]) {
      const arr = toRaw(this) as any
      /* 提前遍歷陣列所有元素，跟蹤每個元素的變化。若其中一個元素髮生變化都會觸發呼叫includes,indexOf或lastIndexOf副作用函式的執行。
       * 假如執行`[2,1,2].includes(1)`，那麼當匹配到第二個元素1時就會返回匹配結果，後續的元素不會被讀取到，因此也就不會被跟蹤收集到，那麼當我們執行`[2,1,2][2] = 1`時就不會觸發副作用執行。
       */
      // 
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, TrackOpTypes.GET, i + '')
      }

      // 呼叫陣列原生的includes,indexOf和lastIndexOf方法
      const res = arr[key](...args)
      if (res === -1 // indexOf和lastIndexOf
          || res === false // includes
      ) {
        // 由於陣列元素有可能為響應式物件而入參也有可能是響應式物件，因此當匹配失敗，則將嘗試獲取陣列元素的被代理物件重新匹配
        return arr[key](...args.map(toRaw))
      } else {
        return res
      }
    }
  })
  // 下面的操作會修改陣列的長度，這裡避免觸發依賴長度的副作用函式執行
  ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
    instrumentations[key] = function(this: unknown[], ...args: unknown[]) {
      pauseTracking()
      const res = (toRaw(this) as any)[key].apply(this, args)
      resetTracking()
      return res
    }
  })

  return instrumentations
}

// 檔案 ./reactive.ts
export function toRaw<T>(observed: T): T {
  const raw = observed && (observed as Target)[ReactiveFlags.RAW]
  return raw ? toRaw(raw) : observed
}

TypeScript小課堂1：['includes', 'indexOf', 'lastIndexOf'] as const在TypeScript中用於標識物件或陣列為不可修改物件。即

let a = ['includes', 'indexOf', 'lastIndexOf'] as const
a[0] = 'hi' // 編譯時報錯

const b = ['includes', 'indexOf', 'lastIndexOf']
b[0] = 'hi' // 修改成功
console.log(b[0]) // 回顯 hi

TypeScript小課堂2：instrumentations[key] = function(this: unknown[], ...args: unknown[]) {...}採用的是TypeScript的this引數，用於限制呼叫函式時的this型別。
轉換為JavaScript就是

instrumentations[key] = function(...args){
  pauseTracking()
  const res = (toRaw(this) as any)[key].apply(this, args)
  resetTracking()
  return res
}

攔截寫操作

既然攔截讀操作是為了收集依賴，那麼攔截寫操作自然就是用於觸發副作用函式了。流程邏輯如下：

  1. 若屬性值為Ref物件，而新值取原始值後不是Ref物件，則更新Ref物件的value，由Ref內部觸發副作用函式
  2. 判斷是否為新增屬性，還是更新屬性值，並觸發副作用函式
const set = /*#__PURE__*/ createSetter()

function createSetter(shallow = false) {
  return function set(
    target: Object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    // Proxy的set攔截器返回true表示賦值成功，false表示賦值失敗

    let oldValue = (target as any)[key]
    if (!shallow) {
      /* 若舊屬性值為Ref，而新值不是Ref，則直接將新值賦值給舊屬性的value屬性
       * 一眼看上去貌似沒有觸發依賴該屬性的副作用函式執行任務壓入排程器，但Ref物件也是響應式物件，賦值給它的value屬性，會觸發依賴該Ref物件的輔佐用函式壓入排程器
       */  
      value = toRaw(value)
      oldValue = toRaw(oldValue)
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    }

    // 用於判斷是新增屬性還是修改屬性
    const hadKey = 
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length // 陣列索引的處理
        : hasOwn(target, key) // 物件或陣列非索引的而處理
    // 賦值後再將副作用函式執行任務壓入排程器
    const result = Reflect.set(target, key, value, receiver)
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        // 觸發依賴該屬性的副作用函式執行任務壓入排程器
        trigger(target, TriggerOpTypes.ADD, key, value)
      }
      else if (hasChange(value, oldValue)) {
        // 觸發依賴該屬性的副作用函式執行任務壓入排程器
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

// 檔案 @vue/shared
export const hasChanged = (value: any, oldValue: any): boolean => !Object.is(value, oldValue)

為什麼不用===而要使用Object.is來比較兩個值是否相等呢？
對於-0===0返回true,NaN === NaN返回false，而Object.is(-0, 0)返回false,Object.is(NaN, NaN)返回true。
更多資訊請檢視《Source Code Reading for Vue 3: How does hasChanged work? 》

攔截刪除操作

刪除操作會修改屬性自然也會觸發依賴該屬性的副作用函式啦

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
}

攔截檢查存在與否操作('name' in state)

檢查存在與否屬於讀操作，因此我們可以用於依賴收集。

function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  // Symbol內建屬性不收集
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    track(target, TrackOpTypes.HAS, key)
  }
  return result
}

攔截鍵遍歷操作

以下操作都會執行ownKeysProxy trap方法

  • Object.getOwnPropertyNames
  • Object.getOwnPropertySymbols
  • Object.keys
  • Object.names
  • for..in

流程邏輯是：對於陣列則跟蹤陣列長度，否則跟蹤由effect模組提供的ITERATE_KEY，這個是什麼東東呢？繼續往下看就知道了:)

function ownKeys(target: object): (string | symbol)[] {
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
  return Reflect.ownKeys(target)
}

Proxy中的receiver到底是什麼？

在上述程式碼中我們發現會使用到Proxy攔截函式入參receiver，如：

  1. 在寫入攔截時，如果target === toRaw(receiver)成立則觸發副作用函式執行
  2. 在讀取攔截時，若key === ReactiveFlags.RAW && receiver === reactiveMap則不以入參會基礎構建響應式物件

  3. 另外，在開篇《petite-vue原始碼剖析-從靜態檢視開始》中建立作用域鏈createScopedContext有如下程式碼

     const reactiveProxy = reactive(
   new Proxy(mergeScope, {
     set(target, key, val, receiver) {
       // 若當設定的屬性不存在於當前作用域則將值設定到父作用域上，由於父作用域以同樣方式建立，因此遞迴找到擁有該屬性的祖先作用域並賦值
       if (receiver === reactiveProxy && !target.hasOwnProperty(key)) {
         return Reflect.set(parentScope, key, val)
       }
       return Reflect.set(target, key, val, receiver)
     }
   })
 )

那麼到底receiver是什麼呢？

  1. 對於資料屬性(data properties)的攔截，receiver指向當前構建的Proxy例項本身

    // `receiver`指向當前構建的`Proxy`例項本身
const state = {
  name: 'john'
}
let pState = new Proxy(state, {
  get(target, key, receiver) {
    console.log("receiver === pState:", receiver === pState)
    return Reflect.get(target, key, receiver)
  }
})

pState.name
// 回顯 receiver === pState: true

  2. 對於訪問器屬性(accessor properties)的攔截，receiver指向this或者繼承Proxy例項的物件

    const state = {
  _name: 'john',
  name() {
    return this._name
  }
}

let pState = new Proxy(state, {
  get(target, key, receiver) {
    console.log("target[key]():", target[key])
    console.log("receiver !== pState:", receiver !== pState)
    return Reflect.get(target, key, receiver)
  }
})

const son = {
  __proto__: pState,
  _name: 'son'
}

console.log(son.name)
// 回顯 target[key](): john
// 回顯 receiver !== pState: true
// 回顯 son

雖然瞭解了receiver的作用，但對如下問題已經無法作出完整的解答：

  1. 在寫入攔截時，如果target === toRaw(receiver)成立則觸發副作用函式執行
    首先receiver是Proxy例項一定不會等於target，而toRaw(receiver)則是獲取其代理的物件，僅當被代理的物件和當前target相同時才觸發副作用函式執行。(至於什麼場景會出現，求高人指導？)
  2. 在讀取攔截時，若key === ReactiveFlags.RAW && receiver === reactiveMap則不以入參會基礎構建響應式物件
    為何reactiveMap會進行Proxy呢？
  3. 另外，在開篇《petite-vue原始碼剖析-從靜態檢視開始》中建立作用域鏈createScopedContext如下程式碼
    receiver === reactiveProxy && !target.hasOwnProperty(key)即對當前作用域(receiver === reactiveProxy)進行寫操作時，若屬性不存在於該作用域物件，則往父作用域上遞迴執行寫操作。

總結

下一篇我們來看看代理Map/WeakMap/Set/WeakSet的mutableCollectionHandlers的實現吧！
尊重原創，轉載請註明來自：https://www.cnblogs.com/fsjoh...肥仔John

相關文章