vue3-yuanma/packages/reactivity/src/reactive.ts

163 lines
4.2 KiB
TypeScript
Raw Normal View History

import { isObject, toRawType, def, hasOwn } from '@vue/shared'
import {
mutableHandlers,
readonlyHandlers,
shallowReactiveHandlers,
shallowReadonlyHandlers
} from './baseHandlers'
2019-06-12 00:03:50 +08:00
import {
mutableCollectionHandlers,
2019-08-23 21:38:32 +08:00
readonlyCollectionHandlers
2019-06-12 00:03:50 +08:00
} from './collectionHandlers'
import { UnwrapRef, Ref } from './ref'
import { makeMap } from '@vue/shared'
2018-09-19 23:35:38 +08:00
export const enum ReactiveFlags {
skip = '__v_skip',
isReactive = '__v_isReactive',
isReadonly = '__v_isReadonly',
raw = '__v_raw',
reactive = '__v_reactive',
readonly = '__v_readonly'
}
interface Target {
__v_skip?: boolean
__v_isReactive?: boolean
__v_isReadonly?: boolean
__v_raw?: any
__v_reactive?: any
__v_readonly?: any
}
2019-06-12 00:03:50 +08:00
const collectionTypes = new Set<Function>([Set, Map, WeakMap, WeakSet])
const isObservableType = /*#__PURE__*/ makeMap(
'Object,Array,Map,Set,WeakMap,WeakSet'
)
2019-06-12 00:03:50 +08:00
const canObserve = (value: Target): boolean => {
2019-06-12 00:03:50 +08:00
return (
!value.__v_skip &&
isObservableType(toRawType(value)) &&
!Object.isFrozen(value)
2019-06-12 00:03:50 +08:00
)
}
2019-10-14 23:21:09 +08:00
// only unwrap nested ref
type UnwrapNestedRefs<T> = T extends Ref ? T : UnwrapRef<T>
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
2019-08-23 21:38:32 +08:00
// if trying to observe a readonly proxy, return the readonly version.
if (target && (target as Target).__v_isReadonly) {
2019-06-12 00:03:50 +08:00
return target
}
2019-08-20 21:58:10 +08:00
return createReactiveObject(
2019-06-12 00:03:50 +08:00
target,
false,
2019-06-12 00:03:50 +08:00
mutableHandlers,
mutableCollectionHandlers
)
}
2019-06-12 00:03:50 +08:00
// Return a reactive-copy of the original object, where only the root level
// properties are reactive, and does NOT unwrap refs nor recursively convert
// returned properties.
export function shallowReactive<T extends object>(target: T): T {
return createReactiveObject(
target,
false,
shallowReactiveHandlers,
mutableCollectionHandlers
)
}
2019-08-23 21:38:32 +08:00
export function readonly<T extends object>(
target: T
2019-10-10 02:01:53 +08:00
): Readonly<UnwrapNestedRefs<T>> {
2019-08-20 21:58:10 +08:00
return createReactiveObject(
2019-06-12 00:03:50 +08:00
target,
true,
2019-08-23 21:38:32 +08:00
readonlyHandlers,
readonlyCollectionHandlers
2019-06-12 00:03:50 +08:00
)
}
2019-06-12 00:03:50 +08:00
// Return a reactive-copy of the original object, where only the root level
// properties are readonly, and does NOT unwrap refs nor recursively convert
// returned properties.
// This is used for creating the props proxy object for stateful components.
export function shallowReadonly<T extends object>(
target: T
): Readonly<{ [K in keyof T]: UnwrapNestedRefs<T[K]> }> {
return createReactiveObject(
target,
true,
shallowReadonlyHandlers,
readonlyCollectionHandlers
)
}
2019-08-20 21:58:10 +08:00
function createReactiveObject(
target: Target,
isReadonly: boolean,
2019-06-12 00:03:50 +08:00
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
if (!isObject(target)) {
if (__DEV__) {
2019-08-20 21:58:10 +08:00
console.warn(`value cannot be made reactive: ${String(target)}`)
2019-06-12 00:03:50 +08:00
}
return target
}
// target is already a Proxy, return it.
2020-05-04 16:30:24 +08:00
// exception: calling readonly() on a reactive object
if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
return target
}
2019-06-12 00:03:50 +08:00
// target already has corresponding Proxy
if (
hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
) {
return isReadonly ? target.__v_readonly : target.__v_reactive
2019-06-12 00:03:50 +08:00
}
// only a whitelist of value types can be observed.
if (!canObserve(target)) {
return target
}
const observed = new Proxy(
target,
collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
)
def(
target,
isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
observed
)
2019-06-12 00:03:50 +08:00
return observed
}
2019-10-22 23:26:48 +08:00
export function isReactive(value: unknown): boolean {
if (isReadonly(value)) {
return isReactive((value as Target).__v_raw)
}
return !!(value && (value as Target).__v_isReactive)
2019-06-12 00:03:50 +08:00
}
2019-10-22 23:26:48 +08:00
export function isReadonly(value: unknown): boolean {
return !!(value && (value as Target).__v_isReadonly)
2019-06-12 00:03:50 +08:00
}
export function isProxy(value: unknown): boolean {
return isReactive(value) || isReadonly(value)
}
2019-06-12 00:03:50 +08:00
export function toRaw<T>(observed: T): T {
return (observed && toRaw((observed as Target).__v_raw)) || observed
2019-06-12 00:03:50 +08:00
}
export function markRaw<T extends object>(value: T): T {
def(value, ReactiveFlags.skip, true)
2019-06-12 00:03:50 +08:00
return value
}