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

一、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)
  ;([&#39;push&#39;, &#39;pop&#39;, &#39;shift&#39;, &#39;unshift&#39;, &#39;splice&#39;] as const).forEach(key => {
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // 由于上面的方法会改变数组长度,因此暂停收集依赖，不然会导致无限递归
      console.log(&#39;----自定义push等入口：this, args, key&#39;);
      pauseTracking()
      console.log(&#39;----自定义push等暂停收集依赖&执行开始&#39;)
      // 调用原始方法
      const res = (toRaw(this) as any)[key].apply(this, args)
      console.log(&#39;----自定义push等暂停收集依赖&执行结束&#39;)
      //复原依赖收集
      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&#39;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源碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！