Vue3源码解析-响应式原理

前言

Vue3对Vue2中的响应式原理使用Proxy进行了重写，本文我们将对Vue3响应式的源码进行分析。

Vue3中提供了四种创建不同类型的响应式数据的方式，分别是：

• reactive 返回的是一个proxy对象，如果访问返回的proxy对象的属性是一个Object类型，会继续调用reactive，进行深度递归
• shallowReactive 返回一个proxy对象，但是只有第一层的属性是响应式
• readonly 返回一个proxy对象，如果属性是对象可以继续调用readonly，但是属性是只读的不可修改，所以在访问阶段也不会进行依赖收集
• shallowReadonly 返回一个proxy对象，只有第一层的属性是响应式，属性只读不可修改 由于篇幅问题这里我们只对reactive类型的响应进行分析，其他流程和这个类似，只是根据不同的参数进入不同的处理流程。

Vue2 和 Vue3的对比

Vue3响应式源码解析

响应式流程

在Vue3中我们可以通过Composition API而不是Options API去显示的创建一个响应式对象.

setup(){
    const orginData = {count: 1}
    const state = reactive(orginData) 
    return {
      state
    }
  }

当我们使用reactive函数创建一个响应式数据的流程如下:

下面我们对其中涉及的关键函数进行解析。

源码解析

reactive

export function reactive(target: T): UnwrapNestedRefs
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
 )
}

首先对传入的参数进行类型判断，如果传入的是一个只读类型的响应式对象，则直接返回该对象，否则就进入createReactiveObject函数，这个函数的主要功能就是根据传入的不同参数，创建不用类型的响应式对象。接着我们来详细分析一下createReactiveObject的创建流程:

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler
) {
  if (!isObject(target)) {
    return target
  }
  // 如果已经是proxy对象则直接返回，有个例外，如果是readOnly作用于响应式 则继续
  if (
    target[ReactiveFlags.RAW] && 
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) 
  ) {
    return target
  }
  const proxyMap = isReadonly ? readonlyMap : reactiveMap
  // 已经有了对应的proxy映射 直接
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  const targetType = getTargetType(target)
  // 只有在白名单中的数据类型才可以被响应式
  if (targetType === TargetType.INVALID) {
    return target
  }
  // 通过Proxy API劫持target对象，把它变成响应式
  const proxy = new Proxy(
    target,
    // Map Set WeakMap WeakSet用collectionhandlers代理 Object Array用baseHandlers代理
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  // 存储一个原始类型和proxy数据类型的映射 
  proxyMap.set(target, proxy)
  return proxy
}

• 首先判断是否是对象类型，如果不是就直接返回，否则继续
• 判断如果目标对象已经是proxy了直接返回，否则继续
• 然后获取当前的目标对象的ProxyMap，如果存在就返回对应的proxy(在函数最后，我们会使用一个WeakMap类型的对象存储原始数据类型和proxy数据类型的映射) 否则继续
• 判断目标对象是否在可响应式数据类型的白名单中，如果不在直接返回目标对象，否则继续。

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

在这个函数前面有对目标类型的限制判断函数，如果响应式的数据类型是以上六种则在可响应式处理的白名单中,否则目标对象的类型是无效的。

• 最后根据不同的目标对象类型传入不同的处理函数，如果目标对象是Object和Array数据类型则TargetType=COMMON对应的处理函数就是baseHandlers,如果目标对象是Map、Set、WeakMap、WeakSet这四种数据类型则对应的处理函数是collectionHandlers。 用一个流程图表示:

以上是对创建响应式函数的分析,接下来我们将分析针对Object的数据类型使用baseHandlers的处理流程。

对应的源码文件: vue-next/packages/reactivity/src/reactive.ts

baseHandlers

const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )

前面的流程中我们分析到如果目标对象是Object和Array会调用baseHandlers，我们是通过reactive函数向createReactiveObject中传入参数,实际上我们执行的是mutableHandlers。

mutableHandlers

这个方法实际上就是对目标对象的一些访问、删除、查询、设置的操作的劫持，这里我们着重分析一些set和get函数，因为这两个函数中涉及到依赖收集和派发更新的操作。分析的时候我们会删除部分代码，只分析主流程。

const get = /*#__PURE__*/ createGetter()
const set = /*#__PURE__*/ createSetter()
export const mutableHandlers: ProxyHandler