Vue3 源码阅读（7）：响应式系统 —— 响应式 API 精讲

这篇文章详细讲讲 Vue3 中的响应式 API，如下图所示：

1，响应式：核心

1-1，ref

ref 的源码解析点击这里。

1-2，computed

computed 的源码解析点击这里。

1-3，reactive

源码如下所示，代码解释在注释中。

export function reactive(target: object) {
  // 如果当前的 target 参数是只读数据的话，直接 return target。
  // 只读数据无需转换成响应式的，因为只读数据不会变更，进而也就不会触发依赖执行，响应式的特征没有意义
  if (isReadonly(target)) {
    return target
  }
  // 调用 createReactiveObject 函数完成响应式数据的转换
  return createReactiveObject(
    // 转换的目标对象
    target,
    // 是否是只读的
    false,
    // 用于处理 Object 和 Array 数据类型的 Proxy handler
    mutableHandlers,
    // 用于处理 Map、Set、WeakMap、WeakSet 数据类型的 Proxy handler
    mutableCollectionHandlers,
    // 一个 Map 数据，键是转换成响应式的原生对象，值是其对应的响应式对象。
    // 这个数据起到一个响应式对象缓存的作用
    reactiveMap
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler,
  proxyMap: WeakMap
) {
  // 判断 target 是不是对象类型，如果不是的话，直接 return target
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // 如果 target 已经是一个代理数据的话，直接返回它。
  // 例外情况：readonly 类型的数据也会被当做响应式对象，直接返回。
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // 查看当前的 target 是不是已经被转化成响应式数据了，如果已经被转化成响应式数据的话，
  // 则直接返回缓存中的对应代理对象。
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // 获取当前 target 的数据类型，数据类型有三大类，第一类是常规代理数据，如：Object、Array
  // 第二大类是收集类，如：Map、Set、WeakMap、WeakSet
  // 第三大类是非法类，也就是说除了上面 6 种数据类型，其他数据都无法转换成响应式的。
  const targetType = getTargetType(target)
  // 如果当前的数据类型是 INVALID 的话，直接返回 target
  if (targetType === TargetType.INVALID) {
    return target
  }
  // 创建 Proxy 对象，并且根据 target 数据类型使用不同的 handler
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  // 将当前转换的响应式数据缓存到 proxyMap 中
  proxyMap.set(target, proxy)
  // 返回代理响应式数据
  return proxy
}

const enum TargetType {
  INVALID = 0,
  COMMON = 1,
  COLLECTION = 2
}

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

baseHandlers 和 collectionHandlers handler 如下所示：

// baseHandlers
export const mutableHandlers: ProxyHandler