reactive定义是通过createReactiveObject方法实现的,以下简述其内容
1.判断传入的值,如果不是object类型的,直接返回当前值
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${String(target)}`)
}
return target
}
示例如下:
const notObj = reactive(1)
console.log(notObj) // 1 警告:value cannot be made reactive: 1
2.如果传入的值已经进行proxy代理,并且不是只读的reactive对象,直接返回当前值
if (
target[ReactiveFlags.RAW] &&
!(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
return target
}
示例如下:
import { reactive } from 'vue';
const obj = { a: 1}
const reactiveVal1 = reactive(obj)
const reactiveVal2 = reactive(reactiveVal1)
console.log(reactiveVal1 === reactiveVal2) // true
3.如果proxyMap映射中已经存在该对象的proxy映射,则直接返回之前映射的内容
const existingProxy = proxyMap.get(target)
if (existingProxy) {
return existingProxy
}
示例如下:
import { reactive } from 'vue';
const obj = { a: 1}
const reactiveVal1 = reactive(obj)
const reactiveVal2 = reactive(obj)
console.log(reactiveVal1 === reactiveVal2) // true
4.一些特殊的值是不能进行proxy代理的,如日期、正则、promise,直接返回传入的值
const targetType = getTargetType(target)
if (targetType === TargetType.INVALID) {
return target
}
示例如下:
const date = new Date()
const notAllowObj = reactive(date)
console.log(notAllowObj) // Wed Feb 01 2023 20:15:33 GMT+0800 (中国标准时间)
5.其他对象,Array/Object通过baseHandlers对象进行代理,
Map/Set/WeakMap/WeakSet通过collectionHandlers对象进行代理
const proxy = new Proxy(
target,
targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
)
proxyMap.set(target, proxy)
return proxy
下文则继续对本文中提到的baseHandlers对象进行展开!
本人菜鸡,有问题望前辈及时指出,不胜感激!!