常规调用流程
1. reactive
这里会先做一个简单的判断,如果通过则调用createReactiveObject
function reactive(target: object) {
// 如果只读,则直接返回target
if (target && (target as Target).__v_isReadonly) {
return target
}
return createReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers
)
}
2. createReactiveObject
这里会做一些可行性和是否代理过的判断,都通过后会调用new Proxy实现代理,具体实现在mutableHandlers
function createReactiveObject(
target: Target,
isReadonly: boolean,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
if (!isObject(target)) {
if (__DEV__) {
console.warn(`value cannot be made reactive: ${
String(target)}`)
}
return target
}
// 如果已代理则直接返回,除非是只读的
if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
return target
}
// 判断是否有相应代理,如果有则直接返回代理
if (
hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
) {
return isReadonly ? target.__v_readonly : target.__v_reactive
}
// 判断是否可代理