Vue源码学习(五)——reactive，ref

m0_74793405

已于 2023-12-17 14:10:31 修改

阅读量353

点赞数

文章标签： vue.js 学习前端

于 2023-12-17 14:10:14 首次发布

本文链接：https://blog.csdn.net/m0_74793405/article/details/135043831

版权

上面说到componentUpdateFn是通过调用render函数，触发track进行依赖收集，但是又是为什么可以进行收集？？？

我们一般会将reactive，ref声明响应式对象放在setup中，setupStatefulComponent 则是执行setup函数，因此就执行reactive，ref，然后通过componentUpdateFn 调用render函数，触发track进行依赖收集，但是为什么可以进行收集，什么是track，我们需要看一下reative源码

1. reactive

我们可以看到reative内部其实是调用了createReativeObject--这才是变成响应式对象的核心

createReativeObject很简单就是检查是否为响应式对象，没有就通过new proxy进行处理，并根据对象为Object，Array 或者是set Map 集合进行不同的处理

一般来说，reative包裹一个对象，我们先从mutableHandlers进行对象处理

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,  // 用于Object Array 类型创建Proxy
    mutableCollectionHandlers, //用于 set Map等集合 创建Proxy
    reactiveMap
  )
}

//变为reactive响应式对象
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, 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 existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // 变为Proxy对象
  // 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
}

1.1 mutableHandlers

mutableHandlers是通过new MutableReactiveHandler ，而MutableReactiveHandler 又是extandsBasReactiveHandler（主要继承的是get方法）

因为对于访问对象进行了proxy处理，因此我们访问对象的时候都会触发get方法

get方法的核心就是如果该对象不是只读，则进行了 track(target, TrackOpTypes.GET, key) 处理

export const mutableHandlers: ProxyHandler<object> =
  /*#__PURE__*/ new MutableReactiveHandler()


class BaseReactiveHandler implements ProxyHandler<Target> {
  constructor(
    protected readonly _isReadonly = false,
    protected readonly _shallow = false
  ) { }

  get(target: Target, key: string | symbol, receiver: object) {
    const isReadonly = this._isReadonly,
      shallow = this._shallow
    //根据key处理特殊的属性访问，用于判断是否为readonly,shallow,reactive
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    } else if (key === ReactiveFlags.IS_SHALLOW) {
      return shallow
    } else if ( //如果访问的key是ReactiveFlags.RAW，返回原始对象target
      key === ReactiveFlags.RAW &&
      receiver ===
      (isReadonly
        ? shallow
          ? shallowReadonlyMap
          : readonlyMap
        : shallow
          ? shallowReactiveMap
          : reactiveMap
      ).get(target)
    ) {
      return target
    }


    const targetIsArray = isArray(target)

    // 针对数组进行特殊处理
    if (!isReadonly) {
      if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
        return Reflect.get(arrayInstrumentations, key, receiver)
      }
      if (key === 'hasOwnProperty') {
        return hasOwnProperty
      }
    }

    const res = Reflect.get(target, key, receiver)
    //忽略内置symbol和non-tarckable键
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }

    // 如果不是只读
    if (!isReadonly) {
      //使用track进行收集依赖 
      track(target, TrackOpTypes.GET, key)
    }

    if (shallow) {
      return res
    }

    if (isRef(res)) {
      // ref unwrapping - skip unwrap for Array + integer key.
      return targetIsArray && isIntegerKey(key) ? res : res.value
    }

    // 如果是对象进行递归处理
    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
  }
}


class MutableReactiveHandler extends BaseReactiveHandler {
  constructor(shallow = false) {
    super(false, shallow)
  }

  set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false
    }
    if (!this._shallow) {
      if (!isShallow(value) && !isReadonly(value)) {
        oldValue = toRaw(oldValue)
        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
  }

  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) {
      trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
    }
    return result
  }

  has(target: object, key: string | symbol): boolean {
    const result = Reflect.has(target, key)
    if (!isSymbol(key) || !builtInSymbols.has(key)) {
      track(target, TrackOpTypes.HAS, key)
    }
    return result
  }

  ownKeys(target: object): (string | symbol)[] {
    track(
      target,
      TrackOpTypes.ITERATE,
      isArray(target) ? 'length' : ITERATE_KEY
    )
    return Reflect.ownKeys(target)
  }
}

1.2 track

当进行track处理的时候，首先就会进行检查当前的reativeEffect是否为activeEffect，如果是才会进行接下来的处理

const app=reactive({msg:'Hello Vue'})

track其实构建了一个 targetMap（app,depsMap）--> despMap(msg,dpe=createDep) -->dep就是一个set，内部存放多个reativeEffect (类似对象存属性，属性存activeEffect)

然后就会进行trackEffect，trackEffect本质就是将当前activeEffect加入到dep中（内部做了一些优化处理--放在更新章节讲解）

图片地址--- 小满Vue3（进阶响应式原理源码实现）_哔哩哔哩_bilibili

export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (shouldTrack && activeEffect) {
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if (!dep) {
      depsMap.set(key, (dep = createDep()))
    }

    const eventInfo = __DEV__
      ? { effect: activeEffect, target, type, key }
      : undefined

    trackEffects(dep, eventInfo)
  }
}

export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  let shouldTrack = false
  if (effectTrackDepth <= maxMarkerBits) {
    if (!newTracked(dep)) {
      //dep.n 打上标记位
      dep.n |= trackOpBit // set newly tracked
      //检查dep.w旧标记有没有打过标记并赋值给shouldTrack
      shouldTrack = !wasTracked(dep)
    }
  } else {
    // Full cleanup mode.
    // 全面清理
    shouldTrack = !dep.has(activeEffect!)
  }
  //TODO优化点(通过打标记)
  // 1.wasTracked(dep)--如果dep.w打过标记说明已经存过，没有则说明没存过
  // 2.通过dep.has(activeEffect)---观察依赖有无存在当前activeEffect中
  if (shouldTrack) {
    dep.add(activeEffect!)
    activeEffect!.deps.push(dep)
    if (__DEV__ && activeEffect!.onTrack) {
      activeEffect!.onTrack(
        extend(
          {
            effect: activeEffect!
          },
          debuggerEventExtraInfo!
        )
      )
    }
  }
}

1.3 trigger

既然说到了track，我们就顺便聊一下trigger

trigger一般都是通过我们人为触发按钮，或者异步操作重新设置了某一个属性，因此触发proxy对象的 set方法（具体可以看上面 MutableReactiveHandler的源码），导致触发trigger

trigger方法的核心就是从 targetMap中取出despMap，然后通过key从depsMap中取出 deps，通过triggerEffects和triggerEffect 调用deps中每一个effect的run方法，进而触发组件更新



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
  }

  let deps: (Dep | undefined)[] = []
  if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    deps = [...depsMap.values()]
  } else if (key === 'length' && isArray(target)) {
    const newLength = Number(newValue)
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= newLength) {
        deps.push(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      deps.push(depsMap.get(key))
    }

    // also run for iteration key on ADD | DELETE | Map.SET
    switch (type) {
      case TriggerOpTypes.ADD:
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // new index added to array -> length changes
          deps.push(depsMap.get('length'))
        }
        break
      case TriggerOpTypes.DELETE:
        if (!isArray(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      case TriggerOpTypes.SET:
        if (isMap(target)) {
          deps.push(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }

  const eventInfo = __DEV__
    ? { target, type, key, newValue, oldValue, oldTarget }
    : undefined

  if (deps.length === 1) {
    if (deps[0]) {
      if (__DEV__) {
        triggerEffects(deps[0], eventInfo)
      } else {
        triggerEffects(deps[0])
      }
    }
  } else {
    const effects: ReactiveEffect[] = []
    for (const dep of deps) {
      if (dep) {
        effects.push(...dep)
      }
    }
    if (__DEV__) {
      triggerEffects(createDep(effects), eventInfo)
    } else {
      triggerEffects(createDep(effects))
    }
  }
}

export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // spread into array for stabilization
  const effects = isArray(dep) ? dep : [...dep]
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

function triggerEffect(
  effect: ReactiveEffect,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  if (effect !== activeEffect || effect.allowRecurse) {
    if (__DEV__ && effect.onTrigger) {
      effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
    }
    if (effect.scheduler) { //如果effect设置了scheduler,执行scheduler
      effect.scheduler()
    } else {
      effect.run()
    }
  }
}

m0_74793405

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue源码学习(五)——reactive，ref

上面说到是通过调用render函数，触发track进行依赖收集，但是又是为什么可以进行收集？？？我们一般会将reactive，ref声明响应式对象放在setup中，因此就执行reactive，ref，然后通过调用render函数，触发track进行依赖收集，但是为什么可以进行收集，什么是track，我们需要看一下reative源码。
复制链接

扫一扫