Vue3 Reactivity 分析

记录我分析 Vue3 源码的过程，首先解析 Reactivity 的原理

package 结构目录

进入目录分别有很多的文件，我们进入packages目录，发现里面有很多的包，我们主要分析reactivity包。进行packages > reactivity > src

index.ts

reactivity 的入口文件，主要对外暴露方法，供外使用

operations.ts

export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}

export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}

主要对外暴露两个枚举，分别枚举追踪收集依赖track和触发依赖trigger的类型type

reactive.ts

reactive.ts 主要介绍了对象是如何代理的，主要的核心关注点在于createReactiveObject

reactive

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,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

reactive函数需要传入一个object类型的参数target，并首先判断target是否是一个readonly类型，如果是，则返回target。然后进一步通过createReactiveObject包装一下

createReactiveObject

export const reactiveMap = new WeakMap<Target, any>()
export const readonlyMap = new WeakMap<Target, any>()

function createReactiveObject(
  target: Target, // 传入的对象
  isReadonly: boolean, // 是否是只读
  baseHandlers: ProxyHandler<any>, // Proxy 的行为处理对象
  collectionHandlers: ProxyHandler<any>
) {
  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 proxyMap = isReadonly ? readonlyMap : reactiveMap
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only a whitelist of 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
}

先看上面的两个weekMap集合，分别代表了 readonly 和 reactive 集合，主要用于存放创建的Proxy

weekmap需要以object作为key，并自带有垃圾回收机制，不易造成内存泄漏。详见es6 weekamp

首先进行判断， target 是否是一个对象。如果不是，将在开发阶段做出警告。所以 reactive(普通值) 是无效的。

下面在判断，如果target有raw原始的对象，并且它不是只读的，或者已经是一个响应式对象(含有__v_isReative)，那么将直接返回target对象。例如：

const people = { name: 'hahaha', age:{ num: 18 } }
const obj = reactive(people)
const __obj = shallowReactive(obj)

上面例子将会进入此判断，并且__obj并不会使 obj浅代理，obj.age 依旧是一个proxy对象，因为直接返回了target

再通过是否只读确定存放入哪个weekmap，如果在proxyMap中找到了当前的代理对象，则直接返回。否则通过 new Proxy()创建一个代理对象。创建完成之后再存入weekmap中，在返回当前的代理对象。reactive就结束了

同样shallowReactive，readonly，shallowReadonly都是通过用createReactiveObject创建的响应式对象，只是传入的参数不同罢了，是否是只读isReadonly和不同的处理对象handlers

其余Api

还有几个Api isReactive isReadonly isProxy toRaw markRaw

// 如果target是只读的，递归判断它的原始值，否则找target __v_isReactive属性
export function isReactive(value: unknown): boolean {
  if (isReadonly(value)) {
    return isReactive((value as Target)[ReactiveFlags.RAW])
  }
  return !!(value && (value as Target)[ReactiveFlags.IS_REACTIVE])
}

// 通过判断target上面的 __v_isReadonly 属性
export function isReadonly(value: unknown): boolean {
  return !!(value && (value as Target)[ReactiveFlags.IS_READONLY])
}

// 直接调用 isReactive 或者 isReadonly
export function isProxy(value: unknown): boolean {
  return isReactive(value) || isReadonly(value)
}

// 递归返回对象身上的原始值 在 __v_raw 属性上
export function toRaw<T>(observed: T): T {
  return (
    (observed && toRaw((observed as Target)[ReactiveFlags.RAW])) || observed
  )
}

export function markRaw<T extends object>(value: T): T {
  def(value, ReactiveFlags.SKIP, true)
  return value
}

markRaw为一个对象身上标记一个属性__v_skip为true 当进行createReactiveObject的时候会进行判断，通过getTargetType获取target的类型。 __v_skip会返回TargetType.INVALID，所以createReactiveObject会直接返回target，并不会代理target对象，所以永远都不会包装成响应式对象

// only a whitelist of value types can be observed.
const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
    return target
}

baseHandlers.ts

baseHandler主要是对proxy的处理。下面就是reactive.ts中各个类型的处理逻辑

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

export const readonlyHandlers: ProxyHandler<object> = {
  get: readonlyGet,
  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
  }
}

export const shallowReactiveHandlers: ProxyHandler<object> = extend(
  {},
  mutableHandlers,
  {
    get: shallowGet,
    set: shallowSet
  }
)

// Props handlers are special in the sense that it should not unwrap top-level
// refs (in order to allow refs to be explicitly passed down), but should
// retain the reactivity of the normal readonly object.
export const shallowReadonlyHandlers: ProxyHandler<object> = extend(
  {},
  readonlyHandlers,
  {
    get: shallowReadonlyGet
  }
)

其中工具函数extend就是Object.assign。

其中的get函数分别为：

const get = /*#__PURE__*/ createGetter()
const shallowGet = /*#__PURE__*/ createGetter(false, true)
const readonlyGet = /*#__PURE__*/ createGetter(true)
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)

其中的set函数分别为：（其中readonly不应具有set功能）

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

我们可以看到get和set都是通过createGetter和createSetter分别创建，只是由于参数不同

下面我们详细剖析createGetter和createSetter内容

createGetter

首先看下源码

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)
    ) {
      return target
    }

    const targetIsArray = isArray(target)

    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }

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

    if (
      isSymbol(key)
        ? builtInSymbols.has(key as symbol)
        : isNonTrackableKeys(key)
    ) {
      return res
    }

    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    if (shallow) {
      return res
    }

    if (isRef(res)) {
      // ref unwrapping - does not apply for Array + integer key.
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? 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
  }
}

createGetter主要有两个形参isReadonly是否只读和shallow是否是深度代理，返回的是一个get函数，主要用于proxy的handler处理

前面几步主要针对于__v_isReactive、__v_isReadonly、__v_raw的判断。

// target[__v_isReactive] 与 target[__v_isReadonly] 始终相反
// target[__v_raw] 返回的是一个原始值

下面进行判断如果是一个数组的话，并且不是只读的，会通过Reflect.get(arrayInstrumentations, key, receiver)进行获取并返回值。 arrayInstrumentations类似与Array.prototype，它劫持了Array.prototype上面的方法，部分方法中触发会进行依赖收集

const arrayInstrumentations: Record<string, Function> = {}
// instrument identity-sensitive Array methods to account for possible reactive
// values
;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
  const method = Array.prototype[key] as any
  arrayInstrumentations[key] = function(this: unknown[], ...args: unknown[]) {
    const arr = toRaw(this)
    for (let i = 0, l = this.length; i < l; i++) {
      track(arr, TrackOpTypes.GET, i + '') // 收集依赖
    }
    // we run the method using the original args first (which may be reactive)
    const res = method.apply(arr, args)
    if (res === -1 || res === false) {
      // if that didn't work, run it again using raw values.
      return method.apply(arr, args.map(toRaw))
    } else {
      return res
    }
  }
})
// 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 => {
  const method = Array.prototype[key] as any
  arrayInstrumentations[key] = function(this: unknown[], ...args: unknown[]) {
    pauseTracking() // 停止收集依赖
    const res = method.apply(this, args)
    resetTracking() // 开始收集依赖
    return res
  }
})

if (!isReadonly) {
  track(target, TrackOpTypes.GET, key)
}

如果不是数组，通过Reflect.get(target, key, receiver)获取到当前的值在判断是否只读isReadonly，如果不是，则进行track依赖收集；如果是只读，因为是只读，便没有set，所以不用进行依赖收集。

if (shallow) {
  return 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)
}

如果当前的结果是一个对象的话，会被深层继续代理。

这是一个优化点，因为当层次较深的对象转化为响应式对象，我们只需要包装第一层，下面层次较深的可以等到get的时候再去readonly或者reactive，类似于懒代理。而不是像Vue2那样一上来就递归处理了。

createSetter

先看源码

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)) {
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
    }

    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) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

同理，它将返回proxy中的set函数。

首先先获取到旧值oldValue

if (!shallow) {
  value = toRaw(value)
  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
}

如果oldValue是一个ref, target不是一个数组，value新值不是一个ref,则将旧的ref直接赋值新值，并return

const hadKey =
    isArray(target) && isIntegerKey(key)
    ? Number(key) < target.length
    : hasOwn(target, key)

如果target是数组，并且key是一个整数类型索引，是否超过数组的长度，返回一个布尔值否则target是对象，判断key是否存在target中

最后通过Reflect.set(target, key, value, receiver)设置值

if (!hadKey) {
    trigger(target, TriggerOpTypes.ADD, key, value)
} else if (hasChanged(value, oldValue)) {
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
}

判断hadkey，如果为false。那么此时的set一定是新增，所以需要触发依赖。否则判断新值旧值是否改变，如果值发生了改变，那么触发依赖

set过程结束

effect.ts

effect中主要由3个核心点 effect,track,trigger

其中需要关注3个全部变量如下：

// targetMap 主要存放为 target中key存放的依赖
// 数据结构为
/**
*   weekMap:{
*      target: Map(): {
*          key: Set() // Set中存放key的依赖
*      }
*   }
*/

const targetMap = new WeakMap<any, KeyToDepMap>()

const effectStack: ReactiveEffect[] = [] // effect栈
let activeEffect: ReactiveEffect | undefined // 当前的effect

effect

effect为副作用函数，会对函数中的变量进行依赖收集

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) {
    effect()
  }
  return effect
}

effect通过传入一个参数fn函数，和一个options配置。返回一个副作用函数如果fn已经是effect函数，则使用fn的原始值。如果options.lazy = true,那么副作用函数不会立即执行一次。最后返回effect函数。

下面讨论createReactiveEffect，看一下源码

function createReactiveEffect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn()
    }
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        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
}

createReactiveEffect主要有两个参数fn副作用函数和options配置

看一下options的数据结构

export interface ReactiveEffectOptions {
  lazy?: boolean // 是否首次运行
  scheduler?: (job: ReactiveEffect) => void
  onTrack?: (event: DebuggerEvent) => void // 自定义的收集依赖函数
  onTrigger?: (event: DebuggerEvent) => void // 自定义的派发函数
  onStop?: () => void
  allowRecurse?: boolean
}

createReactiveEffect的运行过程：

首先看effectStack栈中是否有effect函数，避免重复入栈。effectStack栈的作用是用来明确当前的activeEffect是哪一个effect，例如：

const state = reactive({
    a: 1,
    b: 2,
    c: 3
})
effect(function fn1 () {
    console.log(state.a) // activeEffect --> fn1
    effect(function fn2 () {
        console.log(state.b) // activeEffect --> fn2
    })
    console.log(state.c) // activeEffect --> fn1 这里因为是在fn1中收集的依赖
                         // fn2入栈过后需要出栈保持当前的activeEffect为栈顶元素fn1
})

再看createReactiveEffect函数，判断内采用try finally结构避免fn函数执行报错，不用捕获错误并处理，只需要把当前的effect入栈，再把当前的effect赋值当前的activeEffect，使明确当前的effect是哪一个函数。最后返回fn执行，并返回；执行完后，在finally中，我们需要把effectStack出栈，并把当前的activeEffect标明为栈顶元素。自此，createReactiveEffect的函数逻辑结束。最后为effect的一些属性操作，并把创建的effect函数返回。

track

track 为收集依赖，响应式的原理莫过于收集依赖track和触发依赖trigger 看一下源码

const targetMap = new WeakMap<any, KeyToDepMap>()

export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

ps: 我有点不太理解 effect.active 属性，知道的朋友方便告知一下

前面我们了解到收集依赖的方式为 track(target , type: TrackOpTypes, key) 然后我们需要知道一个targetMap的变量，它是用来存放target对象和deps的映射关系。数据结构为

targetMap {
    target:[object] : Map(): {
        key: Set()
    }
}

函数运行逻辑为：首先查看targetMap中是否有target存放的集合，如果没有则设置一个集合，因为集合中是以key作为索引，并以Set结构为值，因为Set有去重的功能，避免的重复收集相同依赖。例如：

const state = reactive({name: 'hahahh'})
effect(()=>{
    console.log(state.name) // 收集依赖
    console.log(state.name) // 这里就不用重复收集依赖了
})

最后再看dep，dep会添加当前的activeEffect，activeEffect的deps数组同样也会添加当前的dep, 这样做道了effect与dep双向收集 (effect ↔ dep)。最后如果options中有自定义的onTrack，会执行自定义收集函数onTrack。这样就收集了依赖。

总结：在effect传入的fn中，如果有用到的target变量，target会收集当前fn，存放入targetMap 例如：

const target = reactive({
    name: 'ahhah'
})
effect(function fn(){
    console.log(target.name)
})

/* effect函数执行时，当前的 activeEffect = effect(fn) , 当前的target就会收集依赖activeEffect
* 当前的activeEffect 为 effect(fn)， 也会同样的收集 dep。
* 所以最后 targetMap = { // weekMap
*            target: {  // Map
*               name: [activeEffect]  // Set
*            }
*          }
*  activeEffect.deps = [[activeEffect] // Set ]
*/

trigger

trigger触发依赖，将收集到的依赖依次派发。

首先看一下源码

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) {
    // never been tracked
    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) {
    // collection being cleared
    // trigger all effects for target
    depsMap.forEach(add)
  } else if (key === 'length' && isArray(target)) {
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        add(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      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) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
  }

  effects.forEach(run)
}

先看参数

target: object, // target 对象，与targetMap 中的 key对应
type: TriggerOpTypes, // 触发的类型
key?: unknown, // 触发的 key 值，与 target 的 key对应，在target映射的Map中，key对应的是一个Set集合
newValue?: unknown, // 新值
oldValue?: unknown, // 旧值
oldTarget?: Map<unknown, unknown> | Set<unknown> // oldTarget

再看逻辑，首先通过target取targetMap中的依赖集合，如果没有收集到依赖，就直接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)
        }
      })
    }
}

然后定义了一个effects集合，用于待会存放需要触发的集合列表。定义了一个add函数，用与将Set集合中的effect统一存放入上面定义的effects

如果是一个clear类型的type，则直接将target中所有的依赖直接存放入effects。

如果修改的是一个数组，并且触发的key是数组的长度length, 那么如果对应的长度有依赖，则需要收集依赖

/** 源码 */
// 修改的是数组的长度
if (key === 'length' && isArray(target)) {
    // 如果对应的长度有依赖， 则需要收集依赖
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= newValue) {
        // 如果更改的长度小于收集的索引，那么这个索引也需要触发effect重新执行
        add(dep)
      }
    })
}

/** 例子 */
const arr = reactive([1,2,3,4,5])
effect(()=>{
    console.log(arr.toString())
})

setTimeout(()=>{
    arr.length = 3
})

上面例子中，更改了arr的长度，会进入到上面源码中的判断， newVlaue = 3, depsMap循环则为数组的key索引收集到的依赖。因为长度缩小了，所以会触发length的依赖，arr中索引为3 4位置即key >= newValue，也需要触发依赖。

if判断结束，考虑else的情况。

else 可能为对象，也可能是Map，Map使用场景不多，暂不讲解

if (key !== void 0) {
  add(depsMap.get(key))
}

viod 0 = undefined，当有key的时候，将key对应的依赖加入到effects中。注意，这里只能是修改值，因为如果添加新的key值，那么depsMap.get(key)会返回一个undefined，因为新添加的key还没有收集任何依赖，所以只能是修改。

下面在通过switch判断type是哪一种更新触发操作

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
}

注意上面如果数组添加新的元素，那么数组的长度会发生变化，也需要触发length的依赖

自此判断结束，所有的依赖也全部存入了变量effects中，再通过forEach循环遍历执行。

if (effect.options.scheduler) {
  effect.options.scheduler(effect)
} else {
  effect()
}

注意：当effect的options如果设置了scheduler，那么它将优先执行options.scheduler函数。

scheduler在下面要讲的computed中有涉及到。

自此trigger派发结束。

ref.ts

同样具有响应是原理的也有ref。我们来探讨它是如何实现的

ref

查看源码

export function ref(value?: unknown) {
  return createRef(value)
}

我们发现它是通过createRef函数创建

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

createRef参数主要有两个，rawValue原始值，shallow浅代理

shallowRef

export function shallowRef(value?: unknown) {
  return createRef(value, true)
}

我们发现它也是通过createRef函数创建，只是shallow = true

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

createRef函数很简单，如果rawValue是一个ref，那么直接返回；如果不是，通过new RefImpl()创建一个ref对象。

RefImpl

这个就是ref的构造工厂，通过它可以创建ref对象。先看一下源码

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

  get value() {
    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(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}

RefImpl是一个类，拥有一个私有变量_value，和一个__v_isRef = true标识符，通过get set劫持value,这就是为什么ref创建的对象，需要通过.value获取值

constructor过程很简单，如果_shallow是一个浅代理，_value为原始值，否则通过convert函数包装一下

const convert = <T extends unknown>(val: T): T =>
  isObject(val) ? reactive(val) : val

convert函数也很简单，主要是判断val是否是一个对象，是就是用reactive包装一下。这就是为什么ref传入一个复杂对象会被转换成reactive的原理。

再看get，很简单，获取值直接收集一下依赖

再看set，首先他会判断，新旧值是否发生变化，如果有变化，将旧值_rawValue更新，_value更新，然后触发依赖

toRef

看一下源码

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

将一个object对象的key转化为ref对象，并返回。首先判断当前object[key]是否已经是一个ref对象，是就返回，否则就用ObjectRefImpl包装一下

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

toRefs

先看一下源码。

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
}

首先会进行isProxy判断是否是一个响应式对象。不是会报警告

然后定义一个变量ret, 判断当前对象是一个数组还是对象，如果是数组，ret为等长的一个新数组，否则为一个空对象

最后通过循环调用toRef使得ret内的所有key都是一个ref对象。

最后返回ret，这样就转换完成了

总结

其实ref通过类创建一个对象，通过get set劫持数据。与reactive不同，它不是通过proxy代理，class get set 通过babel 编译我们可以看到其实最终的代理还是通过 object.defineProperty。ref一般传入普通值，也可以传入复杂类型，但是底层还是通过convert包装成reactive对象。

computed.ts

计算属性使用方法参考这里只讲原理，不过多介绍

computed

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
  ) as any
}

computed函数只有一个参数getterOrOptions

函数体内首先定义了getter setter 在判断是否是一个函数，如果是函数，那么getter就是这个getterOrOptions

const a = ref(1)
const b = ref(2)
const c = computed(function getterOrOptions () {
    return a.value + b.value
})

否则getterOrOptions是一个带有get set的对象

const a = ref(1)
const b = ref(2)
const c = computed({
            get: () => a.value + b.value,
            set: val => { a.value = val + 1 }
          })

最后在调用ComputedRefImpl创建一个computed对象实质是一个ref对象

ComputedRefImpl

最后我们观察ComputedRefImpl源码

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,
      scheduler: () => {
        if (!this._dirty) {
          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)
  }
}

我们观察到ComputedRefImpl它也是一个类，有私有属性_value值 _dirty是否需要重新计算，公共属性__v_isRefref标识，__v_isReadonly是否只读

constructor中有3个参数，分别是getter setter isReadonly 函数体内，我们可以看到

this.effect = effect(getter, {
  lazy: true,
  scheduler: () => {
    if (!this._dirty) {
      this._dirty = true
      trigger(toRaw(this), TriggerOpTypes.SET, 'value') 
    }
  }
})

通过effect函数传入getter,那么getter中的变量会收集到依赖，也就是当前的getter

const a = ref(1)
const b = ref(2)
const c = computed(function fn () {
    return a.value + b.value
})

上面例子中，a b都会收集依赖fn，因为computed将fn当作getter传入了effect内。

再看源码中的constructor,effect有一个options配置项，配置了lazy = true，所以getter不会立即执行；还配置了一个scheduler函数，还记得trigger函数吗？如果effect.options.scheduler存在，它会优先执行scheduler函数。

// trigger
if (effect.options.scheduler) {
  effect.options.scheduler(effect)
} else {
  effect()
}

再看get函数

get value() {
    if (this._dirty) {
      this._value = this.effect()
      this._dirty = false
    }
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
}

因为一开始_dirty = true，所以需要执行一下依赖函数effect，获取到新值过后，赋值给_value，在关闭_dirty = false，使下次获取该值，不需要再次计算，直接过去缓存到的旧值，然后再收集依赖，返回_value。

set函数很简单，通过闯入的setter跟新值就好了

set value(newValue: T) {
  this._setter(newValue)
}

最后讲一下computed的更新流程，例子：

const a = ref(1)
const b = ref(2)
const c = computed(function fn () {
    return a.value + b.value
})

effect(function effectNameC(){
    console.log(c)
})

setTimeout(() => {
    a.value = 10
}, 1000)

前面我们讲到a b都会收集依赖fn，而在computed内，fn被effect包装了，并配有scheduler。

所以在上面例子中，1s后定时器执行，a的值变成了10，那么他会触发trigger，而它收集到的依赖正好是effect包装的fn函数，所以他会执行options.scheduler函数

scheduler: () => {
    if (!this._dirty) {
      this._dirty = true
      trigger(toRaw(this), TriggerOpTypes.SET, 'value') 
    }
}

此时_dirty在get过后刚好为false，所以会进入判断。_dirty会再次标记为true，最后触发this(即当前的计算属性)(上面例子中c的依赖)的依赖。c的依赖即(例子中的effectNameC)一旦触发，便会进入c的get函数体内，而现在_dirty = true，会重新计算，触发this.effect，获取新值，以达到更新值的目的。

自此computed结束

总结

第一篇完结撒花。记录我源码分享的过程，上文有所误区，欢迎指正。如果帮助，麻烦一键三连。

Vue3 源码深入解析 响应式原理 --> Reactivity