源碼分析Vue3響應式核心之reactive

Posted on by

vue3響應式核心文章匯總：

vue3響應式核心之reactive源碼詳解

vue3響應式核心之effect源碼詳解

vue3響應式核心分兩篇文章講解，本篇講解reactive源碼和實現原理，下一篇vue3響應式核心之effect源碼詳解講解effect依賴收集與觸發。

一、Reactive源碼

1、reactive

源碼路徑：packages/reactivity/src/reactive.ts

export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  // 是否是隻讀響應式對象
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

當我們執行reactive({})的時候，會執行createReactiveObject這個工廠方法，返回一個響應式對象。

2、接著看工廠方法createReactiveObject

源碼路徑：packages/reactivity/src/reactive.ts

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // 僅對對象類型有效（對象、數組和 Map、Set 這樣的集合類型），而對 string、number 和 boolean 這樣的 原始類型 無效。
  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.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only specific value types can be observed.
  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
}

僅對對象類型有效（對象、數組和 Map、Set 這樣的集合類型），而對 string、number 和 boolean 這樣的 原始類型 無效。

if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
}

如果 target 已經是一個代理對象瞭，那麼直接返回 target

if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
}

如果 target 已經有對應的代理對象瞭，那麼直接返回代理對象

const existingProxy = proxyMap.get(target) // 存儲響應式對象
if (existingProxy) {
    return existingProxy
}

對於不能被觀察的類型，直接返回 target

const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
    return target
}

// getTargetType源碼
function getTargetType(value: Target) {
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value) // 不可擴展
    ? TargetType.INVALID
    : targetTypeMap(toRawType(value))
}

// ReactiveFlags枚舉
export const enum ReactiveFlags {
  // 用於標識一個對象是否不可被轉為代理對象，對應的值是 __v_skip 
  SKIP = '__v_skip', 
  // 用於標識一個對象是否是響應式的代理，對應的值是 __v_isReactive
  IS_REACTIVE = '__v_isReactive', 
  // 用於標識一個對象是否是隻讀的代理，對應的值是 __v_isReadonly
  IS_READONLY = '__v_isReadonly',
  // 用於標識一個對象是否是淺層代理，對應的值是 __v_isShallow
  IS_SHALLOW = '__v_isShallow',
  // 用於保存原始對象的 key，對應的值是 __v_raw
  RAW = '__v_raw'
}

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

// toRawType
export const toRawType = (value: unknown): string => {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)
}

創建響應式對象（核心代碼）

const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
)

接下來將重點講解baseHandlers這個回調函數。

二、baseHandlers

1、baseHandlers

baseHandlers是mutableHandlers, 來自於 baseHandlers文件。

mutableHandlers的源碼如下，分別對get、set、deleteProperty、has、ownKeys做瞭代理。

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

接下來看看這些個攔截器的具體實現。

（1）、get的代理

const get = /*#__PURE__*/ createGetter()

function createGetter(isReadonly = false, shallow = false) {
  // 閉包返回 get 攔截器方法
  return function get(target: Target, key: string | symbol, receiver: object) {
       // 如果訪問的是 __v_isReactive 屬性，那麼返回 isReadonly 的取反值
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
      // 如果訪問的是 __v_isReadonly 屬性，那麼返回 isReadonly 的值
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
      // 如果訪問的是 __v_isShallow 屬性，那麼返回 shallow 的值
    } else if (key === ReactiveFlags.IS_SHALLOW) {
      return shallow
      // 如果訪問的是 __v_raw 屬性，那麼返回 target
    } else if (
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target
    }

    // target是否是數組
    const targetIsArray = isArray(target)

    if (!isReadonly) { // 可讀
      // 如果是數組，並且訪問的是數組的一些方法，那麼返回對應的方法
      
    /**
     * Vue3中使用 arrayInstrumentations對數組的部分方法做瞭處理，為什麼要這麼做呢？ 
     * 對於 push、pop、 shift、 unshift、 splice 這些方法，
     * 寫入和刪除時底層會獲取當前數組的length屬性，如果我們在effect中使用的話，
     * 會收集length屬性的依賴，當使用這些api是也會更改length，就會造成死循環：
     * */
      if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
        // 返回重寫的push、pop、 shift、 unshift、 splice 'includes', 'indexOf', 'lastIndexOf'
        return Reflect.get(arrayInstrumentations, key, receiver)
      }
      // 如果訪問的是 hasOwnProperty 方法，那麼返回 hasOwnProperty 方法
      if (key === 'hasOwnProperty') {
        return hasOwnProperty
      }
    }

    // 獲取 target 的 key 屬性值
    const res = Reflect.get(target, key, receiver)

    // 如果是內置的 Symbol，或者是不可追蹤的 key，那麼直接返回 res
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }

    // 如果不是隻讀的，那麼進行依賴收集
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    // 如果是淺的，那麼直接返回 res
    if (shallow) {
      return res
    }
    // 如果 res 是 ref，對返回的值進行解包
    if (isRef(res)) {
      // ref unwrapping - skip unwrap for Array + integer key.
      return targetIsArray && isIntegerKey(key) ? res : res.value
    }
    // 如果 res 是對象，遞歸代理
    if (isObject(res)) {
      // Convert returned value into a proxy as well. we do the isObject check
      // here to avoid invalid value warning. Also need to lazy access readonly
      // and reactive here to avoid circular dependency.
      return isReadonly ? readonly(res) : reactive(res)
    }

    return res
  }
}

當target是數組的時候，'push', 'pop', 'shift', 'unshift', 'splice'這些方法會改變數組長度，會導致無限遞歸，因此要先暫停收集依賴, 所以對數組的以上方法進行瞭攔截和重寫

  if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
    // 返回重寫的push、pop、 shift、 unshift、 splice 'includes', 'indexOf', 'lastIndexOf'
    return Reflect.get(arrayInstrumentations, key, receiver)
  }

重寫的代碼：

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

function createArrayInstrumentations() {
  const instrumentations: Record<string, Function> = {}
  // instrument length-altering mutation methods to avoid length being tracked
  // which leads to infinite loops in some cases (#2137)
  ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // 由於上面的方法會改變數組長度,因此暫停收集依賴，不然會導致無限遞歸
      console.log('----自定義push等入口：this, args, key');
      pauseTracking()
      console.log('----自定義push等暫停收集依賴&執行開始')
      // 調用原始方法
      const res = (toRaw(this) as any)[key].apply(this, args)
      console.log('----自定義push等暫停收集依賴&執行結束')
      //復原依賴收集
      resetTracking()
      return res
    }
  })
  return instrumentations
}

下圖是執行結果：

可以用以下代碼來理解：

let arr = [1,2,3]
let obj = {
    'push': function(...args) {
        // 暫停收集依賴邏輯
        return Array.prototype.push.apply(this, [...args])
        // 啟動收集依賴邏輯
    }
}
let proxy = new Proxy(arr, {	
   get: function (target, key, receiver) {
       console.log('get的key為 ===>' + key);
       let res = '';
       if(key === 'push') { //重寫push
        res = Reflect.get(obj, key, receiver)
       } else {
        res = Reflect.get(target, key, receiver)
       }
       return res
   },
   set(target, key, value, receiver){
       console.log('set的key為 ===>' + key, value);
       return Reflect.set(target, key, value, receiver);
   }
})

proxy.push('99')

特殊屬性的不進行依賴收集

// 如果是內置的 Symbol，或者是不可追蹤的 key，那麼直接返回 res
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
        return res;
    }

這一步是為瞭過濾一些特殊的屬性，例如原生的Symbol類型的屬性，如：Symbol.iterator、Symbol.toStringTag等等，這些屬性不需要進行依賴收集，因為它們是內置的，不會改變；

還有一些不可追蹤的屬性，如：proto、__v_isRef、__isVue這些屬性也不需要進行依賴收集；

依賴收集

// 如果不是隻讀的，那麼進行依賴收集
    if (!isReadonly) {
        track(target, "get" /* TrackOpTypes.GET */, key);
    }

淺的不進行遞歸代理

if (shallow) {
  return res;
}

對返回值進行解包

 // 如果 res 是 ref，對返回的值進行解包
    if (isRef(res)) {
        // 對於數組和整數類型的 key，不進行解包
        return targetIsArray && isIntegerKey(key) ? res : res.value;
    }

這一步是為瞭處理ref的情況，如果res是ref，那麼就對res進行解包，這裡有一個判斷，如果是數組，並且key是整數類型，那麼就不進行解包；因為reactive是深層響應式的，所以要把屬性為ref的進行解包

對象的遞歸代理

 // 如果 res 是對象，那麼對返回的值進行遞歸代理
    if (isObject(res)) {
        return isReadonly ? readonly(res) : reactive(res);
    }

(2)、set的代理

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

function createSetter(shallow = false) {
  // 返回一個set方法
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key] // 獲取舊值
    //  如果舊值是隻讀的，並且是 ref，並且新值不是 ref
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false
    }
    if (!shallow) { // 非shallow
      // 新值非shallow && 非隻讀
      if (!isShallow(value) && !isReadonly(value)) {
        // 獲取新舊值的原始值
        oldValue = toRaw(oldValue)
        value = toRaw(value)
      }
      // 代理對象非數組 & 舊值是ref & 新值非ref
      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
    }
    console.log('----set', target, key, value)

    // 是數組 & key是整型數字 ? 
    // 如果 key 小於數組的長度，那麼就是有這個 key ： 
    // 如果不是數組，那麼就是普通對象，直接判斷是否有這個 key
    // 數組會觸發兩次set: index和新增的值 和 'length'和新增之後的數組長度
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key) 
    // 設置key-value 
    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) {// 如果沒有這個 key，那麼就是新增瞭一個屬性，觸發 add 事件
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) { // // 如果有這個 key，那麼就是修改瞭一個屬性，觸發 set 事件
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    // 返回結果，這個結果為 boolean 類型，代表是否設置成功
    return result
  }
}

主要邏輯：

獲取舊值

let oldValue = target[key];

判斷舊值是否是隻讀的

// 如果舊值是隻讀的，並且是 ref，並且新值不是 ref，那麼直接返回 false，代表設置失敗
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
        return false;
    }

以上就是源碼分析Vue3響應式核心之reactive的詳細內容，更多關於Vue3 reactive的資料請關註WalkonNet其它相關文章！

推薦閱讀：