源碼分析Vue3響應(yīng)式核心之reactive

更新時間：2023年04月23日 16:36:05 作者：無_名

這篇文章主要為大家詳細介紹了Vue3響應(yīng)式核心之reactive的相關(guān)知識，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下

一、Reactive源碼

1、reactive

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

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

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

2、接著看工廠方法createReactiveObject

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

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  // 僅對對象類型有效（對象、數(shù)組和 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
}

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

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

如果 target 已經(jīng)是一個代理對象了，那么直接返回 target

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

如果 target 已經(jīng)有對應(yīng)的代理對象了，那么直接返回代理對象

const existingProxy = proxyMap.get(target) // 存儲響應(yīng)式對象
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 {
  // 用于標(biāo)識一個對象是否不可被轉(zhuǎn)為代理對象，對應(yīng)的值是 __v_skip 
  SKIP = '__v_skip', 
  // 用于標(biāo)識一個對象是否是響應(yīng)式的代理，對應(yīng)的值是 __v_isReactive
  IS_REACTIVE = '__v_isReactive', 
  // 用于標(biāo)識一個對象是否是只讀的代理，對應(yīng)的值是 __v_isReadonly
  IS_READONLY = '__v_isReadonly',
  // 用于標(biāo)識一個對象是否是淺層代理，對應(yīng)的值是 __v_isShallow
  IS_SHALLOW = '__v_isShallow',
  // 用于保存原始對象的 key，對應(yīng)的值是 __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)
}

創(chuàng)建響應(yīng)式對象（核心代碼）

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

接下來將重點講解baseHandlers這個回調(diào)函數(shù)。

二、baseHandlers

1、baseHandlers

baseHandlers是mutableHandlers, 來自于 baseHandlers文件。

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

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

接下來看看這些個攔截器的具體實現(xiàn)。

（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是否是數(shù)組
    const targetIsArray = isArray(target)

    if (!isReadonly) { // 可讀
      // 如果是數(shù)組，并且訪問的是數(shù)組的一些方法，那么返回對應(yīng)的方法
      
    /**
     * Vue3中使用 arrayInstrumentations對數(shù)組的部分方法做了處理，為什么要這么做呢？ 
     * 對于 push、pop、 shift、 unshift、 splice 這些方法，
     * 寫入和刪除時底層會獲取當(dāng)前數(shù)組的length屬性，如果我們在effect中使用的話，
     * 會收集length屬性的依賴，當(dāng)使用這些api是也會更改length，就會造成死循環(huán)：
     * */
      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)

    // 如果是內(nèi)置的 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
  }
}

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

  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[]) {
      // 由于上面的方法會改變數(shù)組長度,因此暫停收集依賴，不然會導(dǎo)致無限遞歸
      console.log('----自定義push等入口：this, args, key');
      pauseTracking()
      console.log('----自定義push等暫停收集依賴&執(zhí)行開始')
      // 調(diào)用原始方法
      const res = (toRaw(this) as any)[key].apply(this, args)
      console.log('----自定義push等暫停收集依賴&執(zhí)行結(jié)束')
      //復(fù)原依賴收集
      resetTracking()
      return res
    }
  })
  return instrumentations
}

下圖是執(zhí)行結(jié)果：

可以用以下代碼來理解：

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

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

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

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

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

依賴收集

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

淺的不進行遞歸代理

if (shallow) {
  return res;
}

對返回值進行解包

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

這一步是為了處理ref的情況，如果res是ref，那么就對res進行解包，這里有一個判斷，如果是數(shù)組，并且key是整數(shù)類型，那么就不進行解包；因為reactive是深層響應(yīng)式的，所以要把屬性為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)
      }
      // 代理對象非數(shù)組 & 舊值是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)

    // 是數(shù)組 & key是整型數(shù)字 ? 
    // 如果 key 小于數(shù)組的長度，那么就是有這個 key ： 
    // 如果不是數(shù)組，那么就是普通對象，直接判斷是否有這個 key
    // 數(shù)組會觸發(fā)兩次set: index和新增的值 和 'length'和新增之后的數(shù)組長度
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key) 
    // 設(shè)置key-value 
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    // 如果目標(biāo)對象是原始數(shù)據(jù)的原型鏈中的某個元素，則不會觸發(fā)依賴收集
    if (target === toRaw(receiver)) {
      if (!hadKey) {// 如果沒有這個 key，那么就是新增了一個屬性，觸發(fā) add 事件
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) { // // 如果有這個 key，那么就是修改了一個屬性，觸發(fā) set 事件
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    // 返回結(jié)果，這個結(jié)果為 boolean 類型，代表是否設(shè)置成功
    return result
  }
}

主要邏輯：

獲取舊值

let oldValue = target[key];

判斷舊值是否是只讀的

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

以上就是源碼分析Vue3響應(yīng)式核心之reactive的詳細內(nèi)容，更多關(guān)于Vue3 reactive的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: