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

178 lines
5.2 KiB
TypeScript
Raw Normal View History

2019-08-23 21:38:32 +08:00
import { reactive, readonly, toRaw } from './reactive'
import { TrackOpTypes, TriggerOpTypes } from './operations'
import { track, trigger, ITERATE_KEY } from './effect'
2018-09-19 23:35:38 +08:00
import { LOCKED } from './lock'
import { isObject, hasOwn, isSymbol, hasChanged, isArray } 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])
.filter(isSymbol)
2018-09-19 23:35:38 +08:00
)
2019-12-21 00:16:46 +08:00
const get = /*#__PURE__*/ createGetter()
const shallowReactiveGet = /*#__PURE__*/ createGetter(false, true)
2019-12-21 00:16:46 +08:00
const readonlyGet = /*#__PURE__*/ createGetter(true)
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)
const arrayInstrumentations: Record<string, Function> = {}
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
arrayInstrumentations[key] = function(...args: any[]): any {
const arr = toRaw(this) as any
for (let i = 0, l = (this as any).length; i < l; i++) {
track(arr, TrackOpTypes.GET, i + '')
}
// we run the method using the orignal args first (which may be reactive)
const res = arr[key](...args)
if (res === -1 || res === false) {
// if that didn't work, run it again using raw values.
return arr[key](...args.map(toRaw))
} else {
return res
}
}
})
function createGetter(isReadonly = false, shallow = false) {
2019-10-22 23:26:48 +08:00
return function get(target: object, key: string | symbol, receiver: object) {
if (isArray(target) && hasOwn(arrayInstrumentations, key)) {
return Reflect.get(arrayInstrumentations, key, receiver)
}
2019-12-06 07:10:06 +08:00
const res = Reflect.get(target, key, receiver)
if (isSymbol(key) && builtInSymbols.has(key)) {
2018-09-21 21:52:46 +08:00
return res
}
if (shallow) {
track(target, TrackOpTypes.GET, key)
// TODO strict mode that returns a shallow-readonly version of the value
return res
}
// ref unwrapping, only for Objects, not for Arrays.
if (isRef(res) && !isArray(target)) {
return res.value
2019-05-29 17:36:53 +08:00
}
track(target, TrackOpTypes.GET, key)
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
}
}
2019-12-21 00:16:46 +08:00
const set = /*#__PURE__*/ createSetter()
const shallowReactiveSet = /*#__PURE__*/ createSetter(false, true)
2019-12-21 00:16:46 +08:00
const readonlySet = /*#__PURE__*/ createSetter(true)
const shallowReadonlySet = /*#__PURE__*/ createSetter(true, true)
function createSetter(isReadonly = false, shallow = false) {
return function set(
target: object,
key: string | symbol,
value: unknown,
receiver: object
): boolean {
if (isReadonly && LOCKED) {
if (__DEV__) {
console.warn(
`Set operation on key "${String(key)}" failed: target is readonly.`,
target
)
}
return true
}
const oldValue = (target as any)[key]
if (!shallow) {
value = toRaw(value)
if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
oldValue.value = value
return true
2018-09-19 23:35:38 +08:00
}
} else {
// in shallow mode, objects are set as-is regardless of reactive or not
}
const hadKey = hasOwn(target, key)
const result = Reflect.set(target, key, value, receiver)
// don't trigger if target is something up in the prototype chain of original
if (target === toRaw(receiver)) {
if (!hadKey) {
trigger(target, TriggerOpTypes.ADD, key, value)
} else if (hasChanged(value, oldValue)) {
trigger(target, TriggerOpTypes.SET, key, value, oldValue)
2018-09-19 23:35:38 +08:00
}
}
return result
2018-09-19 23:35:38 +08:00
}
}
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)
if (result && hadKey) {
trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
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)
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)[] {
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> = {
get,
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> = {
get: readonlyGet,
set: readonlySet,
has,
ownKeys,
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__) {
console.warn(
`Delete operation on key "${String(
key
)}" failed: target is readonly.`,
target
)
2018-09-19 23:35:38 +08:00
}
return true
} else {
return deleteProperty(target, key)
}
}
2018-09-19 23:35:38 +08:00
}
export const shallowReactiveHandlers: ProxyHandler<object> = {
...mutableHandlers,
get: shallowReactiveGet,
set: shallowReactiveSet
}
// 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: ProxyHandler<object> = {
...readonlyHandlers,
get: shallowReadonlyGet,
set: shallowReadonlySet
}