Vue3.x reactive() 揭秘 @vuejs/core

reactive()

源码解析

        首先判断 target 是否为 对象（val !==null && typeof val === 'object' ），不是则直接返回 target  (并且开发环境下发出警告）。

        然后判断 target 是否为 已经是一个 Proxy (响应式代理）且 不是只读代理（通过readonly(proxy) 包裹的代理），若不是则直接返回 target (此时 target 已经是 Proxy）。

        接着获取 target 是否已经有了对应的 Proxy，如果有则直接返回对应的 Proxy，否则再判断 target 的数据类型。若是非对象类型和集合类型（'Object', 'Array', 'Map', 'Set', 'WeakMap', 'WeakSet'），则直接返回 target。

        最后则通过 new Proxy(target, handlers) 【此处 handlers 通过判断 target 的数据类型 targetType 传入具体的 handlers 生成代理】，并通过 proxyMap.set(target, proxy) 记录已经生成的代理，返回生成的 proxy。

源码https://github.com/vuejs/core/blob/main/packages/reactivity/src/reactive.ts#L251

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