reactive

export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  IS_SHALLOW = '__v_isShallow',
  RAW = '__v_raw'
}

reactive

先是判断了isReadonly(target)这个属性 然后就是

return createReactObject(target,false,    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap);

reactiveonly

return createReactObject(target,true,        readonlyHandlers,
    readonlyCollectionHandlers,
    readonlyMap
  )

readonly

return createReactObject(target,false,        shallowReadonlyHandlers,
    shallowReadonlyCollectionHandlers,
    shallowReadonlyMap
  )

createReactIveObject()

五个参数 第一个value 第二个Boolean是不是isReadonly 第三个代理处理函数 第四个收集函数 第五个weakMap处理函数

• 首先会判断是不是对象，还是看是不是开发环境，不是的还是会直接返回的
• 然后还是会判断这个target是不是已经是了Reactive了，是的话就直接返回了，除开isReadonly(这种情况)
• 还要判断这个target是不是以及被记录了，是的话直接返回这个代理对象了
• 然后会经过一个函数getTargetType得到targetType用来判断
• 然后就是代理对象，但是这里会判断一下这个TargetType.COLLECTION,根据这个来判断是收集依赖，还是基本处理函数

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

export const readonlyHandlers: ProxyHandler<object> =
  /*#__PURE__*/ new ReadonlyReactiveHandler()

export const shallowReactiveHandlers = /*#__PURE__*/ new MutableReactiveHandler(
  true
)

// Props handlers are special in the sense that it should not unwrap top-level
// refs (in order to allow refs to be explicitly passed down), but should
// retain the reactivity of the normal readonly object.
export const shallowReadonlyHandlers =
  /*#__PURE__*/ new ReadonlyReactiveHandler(true)

其他函数

toReactive和toReadOnly都会判断是不是对象的

/**
 * Returns a reactive proxy of the given value (if possible).
 *
 * If the given value is not an object, the original value itself is returned.
 *
 * @param value - The value for which a reactive proxy shall be created.
 */
export const toReactive = <T extends unknown>(value: T): T =>
  isObject(value) ? reactive(value) : value

/**
 * Returns a readonly proxy of the given value (if possible).
 *
 * If the given value is not an object, the original value itself is returned.
 *
 * @param value - The value for which a readonly proxy shall be created.
 */
export const toReadonly = <T extends unknown>(value: T): T =>
  isObject(value) ? readonly(value) : value

isReactive 如果这个属性本来就是reactive，那么就会返回给你 __v_reactive isReadonly 就是判断 __v_reactive isShallow 就是判断 __v_readonly

export function isReactive(value: unknown): boolean {
 if (isReadonly(value)) {
   return isReactive((value as Target)[ReactiveFlags.RAW])
 }
 return !!(value && (value as Target)[ReactiveFlags.IS_REACTIVE])
}

export function isReadonly(value: unknown): boolean {
 return !!(value && (value as Target)[ReactiveFlags.IS_READONLY])
}

export function isShallow(value: unknown): boolean {
 return !!(value && (value as Target)[ReactiveFlags.IS_SHALLOW])
}