【vue3源码】七、reactive——Object的响应式实现

【vue3源码】七、reactive——Object的响应式实现

参考代码版本：vue 3.2.37

官方文档：https://vuejs.org/

reactive返回一个对象的响应式代理。

使用

const obj = {
  count: 1,
  flag: true,
  obj: {
    str: ''
  }
}

const reactiveObj = reactive(obj)

源码解析

reactive

export function reactive(target: object) {
  // 如果target是个只读proxy，直接return
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

reactive首先判断target是不是只读的proxy，如果是的话，直接返回target；否则调用一个createReactiveObject方法。

createReactiveObject

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler,
  proxyMap: WeakMap
) {
  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 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
}

createReactiveObject接收五个参数：target被代理的对象，isReadonly是不是只读的，baseHandlersproxy的捕获器，collectionHandlers针对集合的proxy捕获器，proxyMap一个用于缓存proxy的WeakMap对象

如果target不是Object，则进行提示，并返回target。

if (!isObject(target)) {
  if (__DEV__) {
    console.warn(`value cannot be made reactive: ${String(target)}`)
  }
  return target
}

isObject：

export const isObject = (val: unknown): val is Record =>
  val !== null && typeof val === 'object'

如果target已经是个proxy，直接返回target。reactive(readonly(obj))是个例外。

if (
  target[ReactiveFlags.RAW] &&
  !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
  return target
}

然后尝试从proxyMap中获取缓存的proxy对象，如果存在的话，直接返回proxyMap中对应的proxy。否则创建proxy。

const existingProxy = proxyMap.get(target)
if (existingProxy) {
  return existingProxy
}

为什么要缓存代理对象？

这里缓存对象的存在意义是，一方面避免对同一个对象进行多次代理造成的资源浪费，另一方面可以保证相同对象被代理多次后，代理对象保持一致。例如下面这里例子：

const obj = {}
const objReactive = reactive([obj])
console.log(objReactive.includes(objReactive[0]))

如果没有proxyMap这个缓存对象，在includes中由于会访问到数组索引，所以会创建一个obj的响应式对象，而在includes的参数中，又访问了依次objReactive的0索引，所以又会创建个新的obj代理对象。两次创建的代理对象由于地址不一致，造成objReactive.includes(objReactive[0])输出为false。而有了这个缓存对象，当第二次要创建代理对象时，会直接从缓存中获取，这样就保证了相同对象的代理对象地址一致性的问题。

并不是任何对象都可以被proxy所代理。这里会通过getTargetType方法来进行判断。

const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
  return target
}

getTargetType：

function getTargetType(value: Target) {
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
    ? TargetType.INVALID
    : targetTypeMap(toRawType(value))
}

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

getTargetType有三种可能的返回结果

• TargetType.INVALID：代表target不能被代理
• TargetType.COMMON：代表target是Array或Object
• TargetType.COLLECTION：代表target是Map、Set、WeakMap、WeakSet中的一种

target不能被代理的情况有三种：

1. 显示声明对象不可被代理（通过向对象添加__v_skip: true属性）或使用markRaw标记的对象
2. 对象为不可扩展对象：如通过Object.freeze、Object.seal、Object.preventExtensions的对象
3. 除了Object、Array、Map、Set、WeakMap、WeakSet之外的其他类型的对象，如Date、RegExp、Promise等

如果targetType !== TargetType.INVALID，那么则可以进行target的代理操作了。

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

当new Proxy(target, handler)时，这里的handler有两种：一种是针对Object、Array的baseHandlers，一种是针对集合（Set、Map、WeakMap、WeakSet）的collectionHandlers。

为什么这里要分两种handler呢?

首先，我们要知道在handler中我们要进行依赖的收集和依赖的触发。那么什么情况进行依赖收集和触发依赖呢？当我们对代理对象执行读取操作应该收集对应依赖，而当我们对代理对象执行修改操作时应该触发依赖。

那么什么样的操作被称为读取操作和修改操作呢？

	读取操作	修改操作
Object	obj.a、for...in...、key in obj	obj.a=1、delete obj.a
Array	for...of...、for...in...、arr[index]、arr.length、arr.indexOf/lastIndexOf/includes(item)、arr.some/every/forEach等	arr[0]=1、arr.length=0、arr.pop/push/unshift/shift、arr.splice/fill/sort等
集合	map/set.size、map.get(key)、map/set.has(key)、map/set.forEach、map.keys/values()等	set.add(value)、map.add(key, value)、set/map.clear()、set/map.delete(key)

对于Object、Array、集合这几种数据类型，如果使用proxy捕获它们的读取或修改操作，其实是不一样的。比如捕获修改操作进行依赖触发时，Object可以直接通过set（或deleteProperty）捕获器，而Array是可以通过pop、push等方法进行修改数组的，所以需要捕获它的get操作进行单独处理，同样对于集合来说，也需要通过捕获get方法来处理修改操作。

接下来看下创建reactive所需要的两个handler：mutableHandlers（Object与Array的handler）、mutableCollectionHandlers（集合的handler）。

mutableHandlers

export const mutableHandlers: ProxyHandler