2019-08-23 21:38:32 +08:00
|
|
|
import { reactive, readonly, toRaw } from './reactive'
|
2019-12-04 00:30:24 +08:00
|
|
|
import { TrackOpTypes, TriggerOpTypes } from './operations'
|
|
|
|
import { track, trigger, ITERATE_KEY } from './effect'
|
2018-09-19 23:35:38 +08:00
|
|
|
import { LOCKED } from './lock'
|
2019-10-23 23:53:43 +08:00
|
|
|
import { isObject, hasOwn, isSymbol, hasChanged } from '@vue/shared'
|
2019-08-16 21:42:46 +08:00
|
|
|
import { isRef } from './ref'
|
2018-09-19 23:35:38 +08:00
|
|
|
|
|
|
|
const builtInSymbols = new Set(
|
|
|
|
Object.getOwnPropertyNames(Symbol)
|
|
|
|
.map(key => (Symbol as any)[key])
|
2019-10-09 23:49:23 +08:00
|
|
|
.filter(isSymbol)
|
2018-09-19 23:35:38 +08:00
|
|
|
)
|
|
|
|
|
2019-12-03 03:11:12 +08:00
|
|
|
function createGetter(isReadonly: boolean, shallow = false) {
|
2019-10-22 23:26:48 +08:00
|
|
|
return function get(target: object, key: string | symbol, receiver: object) {
|
2019-11-07 01:51:06 +08:00
|
|
|
let res = Reflect.get(target, key, receiver)
|
2019-10-09 23:49:23 +08:00
|
|
|
if (isSymbol(key) && builtInSymbols.has(key)) {
|
2018-09-21 21:52:46 +08:00
|
|
|
return res
|
|
|
|
}
|
2019-12-03 03:11:12 +08:00
|
|
|
if (shallow) {
|
2019-12-04 00:30:24 +08:00
|
|
|
track(target, TrackOpTypes.GET, key)
|
2019-12-03 03:11:12 +08:00
|
|
|
// TODO strict mode that returns a shallow-readonly version of the value
|
|
|
|
return res
|
|
|
|
}
|
|
|
|
if (isRef(res)) {
|
|
|
|
return res.value
|
2019-05-29 17:36:53 +08:00
|
|
|
}
|
2019-12-04 00:30:24 +08:00
|
|
|
track(target, TrackOpTypes.GET, key)
|
2018-10-17 03:47:51 +08:00
|
|
|
return isObject(res)
|
2019-08-23 21:38:32 +08:00
|
|
|
? isReadonly
|
|
|
|
? // need to lazy access readonly and reactive here to avoid
|
2018-09-21 21:52:46 +08:00
|
|
|
// circular dependency
|
2019-08-23 21:38:32 +08:00
|
|
|
readonly(res)
|
2019-08-16 21:42:46 +08:00
|
|
|
: reactive(res)
|
2018-09-21 21:52:46 +08:00
|
|
|
: res
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function set(
|
2019-10-22 23:26:48 +08:00
|
|
|
target: object,
|
2018-09-19 23:35:38 +08:00
|
|
|
key: string | symbol,
|
2019-10-22 23:26:48 +08:00
|
|
|
value: unknown,
|
|
|
|
receiver: object
|
2018-09-19 23:35:38 +08:00
|
|
|
): boolean {
|
2019-06-11 23:50:28 +08:00
|
|
|
value = toRaw(value)
|
2019-10-22 23:26:48 +08:00
|
|
|
const oldValue = (target as any)[key]
|
2019-08-16 21:42:46 +08:00
|
|
|
if (isRef(oldValue) && !isRef(value)) {
|
2019-08-13 23:27:48 +08:00
|
|
|
oldValue.value = value
|
2019-05-29 17:36:53 +08:00
|
|
|
return true
|
|
|
|
}
|
2019-10-15 23:59:40 +08:00
|
|
|
const hadKey = hasOwn(target, key)
|
2018-09-19 23:35:38 +08:00
|
|
|
const result = Reflect.set(target, key, value, receiver)
|
|
|
|
// don't trigger if target is something up in the prototype chain of original
|
2019-06-11 23:50:28 +08:00
|
|
|
if (target === toRaw(receiver)) {
|
2018-09-21 21:52:46 +08:00
|
|
|
/* istanbul ignore else */
|
2018-09-19 23:35:38 +08:00
|
|
|
if (__DEV__) {
|
|
|
|
const extraInfo = { oldValue, newValue: value }
|
|
|
|
if (!hadKey) {
|
2019-12-04 00:30:24 +08:00
|
|
|
trigger(target, TriggerOpTypes.ADD, key, extraInfo)
|
2019-10-23 23:53:43 +08:00
|
|
|
} else if (hasChanged(value, oldValue)) {
|
2019-12-04 00:30:24 +08:00
|
|
|
trigger(target, TriggerOpTypes.SET, key, extraInfo)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (!hadKey) {
|
2019-12-04 00:30:24 +08:00
|
|
|
trigger(target, TriggerOpTypes.ADD, key)
|
2019-10-23 23:53:43 +08:00
|
|
|
} else if (hasChanged(value, oldValue)) {
|
2019-12-04 00:30:24 +08:00
|
|
|
trigger(target, TriggerOpTypes.SET, key)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return result
|
|
|
|
}
|
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
function deleteProperty(target: object, key: string | symbol): boolean {
|
2019-09-06 08:48:14 +08:00
|
|
|
const hadKey = hasOwn(target, key)
|
2019-10-22 23:26:48 +08:00
|
|
|
const oldValue = (target as any)[key]
|
2018-09-19 23:35:38 +08:00
|
|
|
const result = Reflect.deleteProperty(target, key)
|
2019-10-09 23:55:57 +08:00
|
|
|
if (result && hadKey) {
|
2018-09-21 21:52:46 +08:00
|
|
|
/* istanbul ignore else */
|
2018-09-19 23:35:38 +08:00
|
|
|
if (__DEV__) {
|
2019-12-04 00:30:24 +08:00
|
|
|
trigger(target, TriggerOpTypes.DELETE, key, { oldValue })
|
2018-09-19 23:35:38 +08:00
|
|
|
} else {
|
2019-12-04 00:30:24 +08:00
|
|
|
trigger(target, TriggerOpTypes.DELETE, key)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
return result
|
|
|
|
}
|
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
function has(target: object, key: string | symbol): boolean {
|
2018-09-19 23:35:38 +08:00
|
|
|
const result = Reflect.has(target, key)
|
2019-12-04 00:30:24 +08:00
|
|
|
track(target, TrackOpTypes.HAS, key)
|
2018-09-19 23:35:38 +08:00
|
|
|
return result
|
|
|
|
}
|
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
function ownKeys(target: object): (string | number | symbol)[] {
|
2019-12-04 00:30:24 +08:00
|
|
|
track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
|
2018-09-19 23:35:38 +08:00
|
|
|
return Reflect.ownKeys(target)
|
|
|
|
}
|
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
export const mutableHandlers: ProxyHandler<object> = {
|
2018-09-22 04:54:12 +08:00
|
|
|
get: createGetter(false),
|
2018-09-19 23:35:38 +08:00
|
|
|
set,
|
|
|
|
deleteProperty,
|
|
|
|
has,
|
|
|
|
ownKeys
|
|
|
|
}
|
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
export const readonlyHandlers: ProxyHandler<object> = {
|
2018-09-22 04:54:12 +08:00
|
|
|
get: createGetter(true),
|
2018-09-19 23:35:38 +08:00
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
set(
|
|
|
|
target: object,
|
|
|
|
key: string | symbol,
|
|
|
|
value: unknown,
|
|
|
|
receiver: object
|
|
|
|
): boolean {
|
2018-09-19 23:35:38 +08:00
|
|
|
if (LOCKED) {
|
|
|
|
if (__DEV__) {
|
2018-09-21 04:18:22 +08:00
|
|
|
console.warn(
|
2019-10-06 23:26:33 +08:00
|
|
|
`Set operation on key "${String(key)}" failed: target is readonly.`,
|
2018-09-21 04:18:22 +08:00
|
|
|
target
|
|
|
|
)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
return true
|
|
|
|
} else {
|
|
|
|
return set(target, key, value, receiver)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
deleteProperty(target: object, key: string | symbol): boolean {
|
2018-09-19 23:35:38 +08:00
|
|
|
if (LOCKED) {
|
|
|
|
if (__DEV__) {
|
2018-09-21 04:18:22 +08:00
|
|
|
console.warn(
|
2019-10-06 23:26:33 +08:00
|
|
|
`Delete operation on key "${String(
|
|
|
|
key
|
|
|
|
)}" failed: target is readonly.`,
|
2018-09-21 04:18:22 +08:00
|
|
|
target
|
|
|
|
)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
return true
|
|
|
|
} else {
|
|
|
|
return deleteProperty(target, key)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
has,
|
|
|
|
ownKeys
|
|
|
|
}
|
2019-11-07 01:51:06 +08:00
|
|
|
|
|
|
|
// 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.
|
2019-12-03 03:11:12 +08:00
|
|
|
export const shallowReadonlyHandlers: ProxyHandler<object> = {
|
2019-11-07 01:51:06 +08:00
|
|
|
...readonlyHandlers,
|
2019-12-03 03:11:12 +08:00
|
|
|
get: createGetter(true, true)
|
2019-11-07 01:51:06 +08:00
|
|
|
}
|