【vue3 源碼分析】講透響應式原理

作者：一袋米要扛幾樓。座右銘：最怕你一生碌碌無爲，還安慰自己平凡可貴。

響應式原理架構圖

圖片來源:__mxin

前置基礎知識

Proxy (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
Reflect (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
WeakMap (https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)

源碼講解

reactive

packages/reactivity/src/reactive.ts

// 擴展被代理對象的標誌屬性聲明
export interface Target {
  [ReactiveFlags.SKIP]?: boolean //是否是不可代理對象，被markRaw()過則爲true
  [ReactiveFlags.IS_REACTIVE]?: boolean //是否被reactive代理過
  [ReactiveFlags.IS_READONLY]?: boolean //是否被readonly代理過
  [ReactiveFlags.RAW]?: any //被代理的原對象 const p = reactive(obj); p[ReactiveFlags.RAW] === obj 爲true
}
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 // invalid不可被代理的基本數據類型 int boolean string
  }
}

// 運用ts函數重載機制讓reactive有2種不同類型的入參、返回
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false, // isReadonly
    mutableHandlers,  // 用於Object Array 類型創建Proxy
    mutableCollectionHandlers // 用於Set Map WeakSet WeakMap 類型創建Proxy
  )
}
// 創建響應式代理對象
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  // target已經被代理過，並且不是爲了將響應式對象變爲只讀則直接返回
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // 從緩存(readonlyMap,reactiveMap)中查找，如果已經被代理過則直接返回
  const proxyMap = isReadonly ? readonlyMap : reactiveMap
  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
}

packages/reactivity/src/baseHandles.ts

// mutableHandlers是Proxy的代理配置，const r = new Proxy(obj,mutableHandlers)
export const mutableHandlers: ProxyHandler<object> = {
  get: createGetter,
  set: createSetter,
  deleteProperty,
  has,
  ownKeys
}
function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    } else if (
      key === ReactiveFlags.RAW &&
      receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)
    ) {
      // 如果key是'__v_raw未被代理標記屬性'且target已被響應式代理過，則直接返回該代理的原對象
      // 應用場景 const originObj = toRaw(reactive(obj)); originObj === obj 爲 true
      return target
    }
    const targetIsArray = isArray(target)
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      // 代理數組的 'includes', 'indexOf', 'lastIndexOf' 方法並觸發依賴收集
      // 代理數組的 'push', 'pop', 'shift', 'unshift', 'splice' 並觸發依賴的副作用effect
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    const res = Reflect.get(target, key, receiver)
    if (
      isSymbol(key)
        ? builtInSymbols.has(key as symbol)
        : key === `__proto__` || key === `__v_isRef`
    ) {
      return res
    }
    if (!isReadonly) {
      // 如果不是隻讀代理觸發依賴收集
      track(target, TrackOpTypes.GET, key)
    }
    // 如果是shallowReactive()直接返回結果，如果target[key]是引用類型則對該值進行響應式收集
    // 這裏充分說明了vue3 reactive()的時候只代理了target的屬性這一層，只有當訪問target的某一個引用類型屬性時才向下繼續代理一層，而不是像vue2一樣在初始化的時候迭代代理所有引用類型
    if (shallow) {
      return res
    }
    if (isRef(res)) {
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? res.value : res
    }
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }
    return res
  }
}
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)
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        // 如果不是數組，且舊值是ref類型，新值不是ref類型
        oldValue.value = value
        return true
      }
    } else {
      // 如果是shallowReactive()返回的proxy，修改其屬性時不會觸發響應式副作用effect
    }
    // 如果是對象返回true，如果是數組看是否是合法下標或length indexOf push等自有屬性
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : 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) {
        // 觸發該屬性的副作用effect，且類型爲新增屬性
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        // 觸發該屬性的副作用effect，且類型爲修改屬性
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}
// 代理target的deleteProperty方法，在刪除成功後觸發依賴的副作用effect
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) { // 如果屬性存在並刪除成功，觸發依賴該屬性的副作用effect
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}
// 代理target的has方法，觸發該屬性的依賴收集
function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  if (!isSymbol(key) || !builtInSymbols.has(key)) { 
    // 如果不是symbol類型則觸發對該屬性依賴的收集
    track(target, TrackOpTypes.HAS, key)
  }
  return result
}
// 代理target的ownKeys方法，觸發該屬性的依賴收集
function ownKeys(target: object): (string | number | symbol)[] {
  // 觸發對該屬性依賴的收集
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY) 
  return Reflect.ownKeys(target)
}

readonly

export function readonly<T extends object>(
  target: T
): DeepReadonly<UnwrapNestedRefs<T>> {
  return createReactiveObject(
    target,
    true, // isReadonly
    readonlyHandlers, // 用於Object Array 類型創建Proxy
    readonlyCollectionHandlers // 用於Set Map WeakSet WeakMap 類型創建Proxy
  )
}
export const readonlyHandlers: ProxyHandler<object> = {
  get: readonlyGet, // 與reactive 的 createGetter一樣，只是第一個參數爲true
  set(target, key) {
    if (__DEV__) {
      console.warn(
        `Set operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  },
  deleteProperty(target, key) {
    if (__DEV__) {
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  }
}

ref

// 運用ts函數重載機制讓ref有4種不同類型的入參、返回
export function ref<T extends object>(value: T): ToRef<T>
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value)
}

// ref底層不是通過proxy實現的，而是自定義類RefImpl
function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

// 將原始數據存儲在_value，攔截定義value屬性的get set方法實現依賴收集和修改更新響應
class RefImpl<T> {
  private _value: T
  public readonly __v_isRef = true
  constructor(private _rawValue: T, public readonly _shallow = false) {
    // 如果是淺響應則無論是引用類型還是基礎類型都直接存儲原始數據
    this._value = _shallow ? _rawValue : convert(_rawValue) // 注意covert在下面講解下
  }
  get value() {
    // get觸發依賴收集，toRaw(this)是被ref(data)包裹的原始數據data
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }
  set value(newVal) {
    // 如果新舊值沒有變化則不處理
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      // trigger 觸發依賴此屬性的effect重新執行，toRaw(this)是被ref(data)包裹的原始數據data
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}

// 如果被const r = ref(data)包裹的原始數據data是引用類型，則對引用類型進行響應式處理，否則直接返回基本類型。
// 爲什麼要這樣處理呢? 
// 因爲如果不這樣做的話，r.value的變化會被get set攔截處理，但是r.value.xxx無法被攔截失去了響應
const convert = <T extends unknown>(val: T): T => isObject(val) ? reactive(val) : val

// 將reactive數據和ref數據的行爲統一成reactive行爲
// 主要用於template中html標籤屬性綁定時不需要寫r.value, 直接寫r即可
// 讓ref類型的數據具有reactive類型的行爲（不需要通過r.value.xxx訪問，直接r.xxx）
export function proxyRefs<T extends object>(
  objectWithRefs: T
): ShallowUnwrapRef<T> {
  return isReactive(objectWithRefs)
    ? objectWithRefs
    : new Proxy(objectWithRefs, shallowUnwrapHandlers)
}
const shallowUnwrapHandlers: ProxyHandler<any> = {
  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
  set: (target, key, value, receiver) => {
    const oldValue = target[key]
    if (isRef(oldValue) && !isRef(value)) {
      oldValue.value = value
      return true
    } else {
      return Reflect.set(target, key, value, receiver)
    }
  },
}
export function unref<T>(ref: T): T extends Ref<infer V> ? V : T {
  return isRef(ref) ? (ref.value as any) : ref
}

// 將reactive對象的某個屬性變成ref類型
// const r = toRef(reactive({}),'attr')
export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): ToRef<T[K]> {
  return isRef(object[key])
    ? object[key]
    : (new ObjectRefImpl(object, key) as any)
}
class ObjectRefImpl<T extends object, K extends keyof T> {
  public readonly __v_isRef = true
  constructor(private readonly _object: T, private readonly _key: K) {}
  get value() {
    return this._object[this._key]
  }
  set value(newVal) {
    this._object[this._key] = newVal
  }
}
// 將reactive對象的所有屬性變成ref類型
// const obj = toRefs(reactive({}))
export function toRefs<T extends object>(object: T): ToRefs<T> {
  if (__DEV__ && !isProxy(object)) {
    console.warn(`toRefs() expects a reactive object but received a plain one.`)
  }
  const ret: any = isArray(object) ? new Array(object.length) : {}
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  return ret
}

effect

effect的源碼非常具有跳躍性，需要多看上面的響應式原理架構圖才能理解
watch\computed\render 的時候都會創建 effect，所以入口來源複雜，入參也複雜
reactive\ref\computed\watch\render\update 訪問都會級聯觸發該屬性依賴收集 track
reactive\ref\computed 修改都會級聯觸發 trigger 執行該屬性的副作用
effectStack 是當前待執行的 effect 棧
activeEffect 是全局正在觸發的 effect，每當一個 effect 觸發新的 effect 入棧的時候 activeEffect 都會更新爲新的，執行完畢後又從 effectStack pop 出前一個
當調用 watch(getter,scheduler,{onTrack,onTrigger}) 時，可以簡單的理解爲觸發

effect(getter, {
  lazy: true, // 非computed
  onTrack,
  onTrigger,
  scheduler
})

export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) { // computed屬性懶執行，其他副作用執行觸發依賴收集
    effect()
  }
  return effect
}
function createReactiveEffect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn()
    }
    // effectStack 是當前有效的待執行effect棧
    if (!effectStack.includes(effect)) {
      cleanup(effect) // 可能有多個響應式屬性都會觸發該effect，但是該effect只會執行一次不會重複執行，所以從所有依賴屬性的副作用數組中刪除該effect
      try {
        enableTracking() // 只有副作用原函數fn()執行期間收集其依賴的響應式屬性，執行完畢後不能再收集
        effectStack.push(effect)
        activeEffect = effect // 當前副作用爲全局正在執行的副作用
        return fn()
      } finally {
        // 當前副作用依賴收集完成後退棧並不再觸發依賴收集
        effectStack.pop() 
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect.allowRecurse = !!options.allowRecurse
  effect._isEffect = true
  effect.active = true
  effect.raw = fn // 存儲原始副作用函數
  effect.deps = [] // 該副作用依賴的所有響應式屬性
  effect.options = options
  return effect
}
// 可能有多個響應式屬性都會觸發該effect，但是該effect只會執行一次不會重複執行，所以從所有依賴屬性的副作用數組中刪除該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
  }
}

export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}
export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}
// 依賴收集副作用函數
export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target) // targetMap存儲所有的proxy代理原target
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key) // depsMap存儲某個proxy代理原target裏的所有屬性
  if (!dep) {
    depsMap.set(key, (dep = new Set())) // dep存儲某個proxy代理原target裏的某個屬性的所有副作用effect
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      // watch(key,()=>{},{onTrack}) 裏的onTrack觸發此處
      // watchEffect(()=>{},{onTrack}) 裏的onTrack觸發此處
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}
// 依賴副作用觸發函數
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) {
    return
  }
  const effects = new Set<ReactiveEffect>() // 存儲本次操作導致的需要執行的副作用集合
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        if (effect !== activeEffect || effect.allowRecurse) {
          effects.add(effect)
        }
      })
    }
  }

  if (type === TriggerOpTypes.CLEAR) {
    // 對某個數組或集合執行清空操作時，該數組的所有副作用都要添加到待執行數組中
    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 !== void 0) { // void 0 === undefined
      add(depsMap.get(key))
    }

    // also run for iteration key on ADD | DELETE | Map.SET
    switch (type) {
      case TriggerOpTypes.ADD:
        if (!isArray(target)) {
          add(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            add(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // new index added to array -> length changes
          add(depsMap.get('length'))
        }
        break
      case TriggerOpTypes.DELETE:
        if (!isArray(target)) {
          add(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            add(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      case TriggerOpTypes.SET:
        if (isMap(target)) {
          add(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }
  // 創建執行副作用的函數
  const run = (effect: ReactiveEffect) => {
    if (__DEV__ && effect.options.onTrigger) {
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    if (effect.options.scheduler) {
      // scheduler 可以簡單理解爲watch(key,cb)的cb
      effect.options.scheduler(effect)
    } else {
      effect()
    }
  }
  effects.forEach(run)
}

computed

// 運用ts函數重載機制讓ref有3種不同類型的入參、返回
export function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>
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>
  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  return new ComputedRefImpl(
    getter,
    setter,
    isFunction(getterOrOptions) || !getterOrOptions.set // isReadonly
  ) as any
}
class ComputedRefImpl<T> {
  private _value!: T // 當前計算屬性返回值
  private _dirty = true // 是否有依賴屬性變化導致需要重新求值
  public readonly effect: ReactiveEffect<T>
  public readonly __v_isRef = true;
  public readonly [ReactiveFlags.IS_READONLY]: boolean //是否只讀
  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean
  ) {
    this.effect = effect(getter, {
      lazy: true, // 初始化時不求值，觸發get的時候才求值
      scheduler: () => {
        if (!this._dirty) { 
          // 依賴屬性發生變化，當前計算屬性變髒了，在下次get訪問時需要重新求值；觸發依賴該計算屬性的副作用執行
          this._dirty = true
          trigger(toRaw(this), TriggerOpTypes.SET, 'value')
        }
      }
    })
    this[ReactiveFlags.IS_READONLY] = isReadonly
  }
  get value() {
    if (this._dirty) {
      // 第一次訪問或依賴屬性發生變化才重新求值
      this._value = this.effect()
      this._dirty = false
    }
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }
  set value(newValue: T) {
    this._setter(newValue)
  }
}

響應式原理架構圖

前置基礎知識

源碼講解

reactive

readonly

ref

effect

computed

延伸閱讀

猜你喜歡