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

139 lines
3.5 KiB
TypeScript
Raw Normal View History

2019-08-16 21:42:46 +08:00
import { reactive, immutable, toRaw } from './reactive'
2018-09-19 23:35:38 +08:00
import { OperationTypes } from './operations'
2018-11-14 00:03:35 +08:00
import { track, trigger } from './effect'
2018-09-19 23:35:38 +08:00
import { LOCKED } from './lock'
import { isObject } from '@vue/shared'
2019-08-16 21:42:46 +08:00
import { isRef } from './ref'
2018-09-19 23:35:38 +08:00
const hasOwnProperty = Object.prototype.hasOwnProperty
const builtInSymbols = new Set(
Object.getOwnPropertyNames(Symbol)
.map(key => (Symbol as any)[key])
.filter(value => typeof value === 'symbol')
)
function createGetter(isImmutable: boolean) {
2018-09-21 21:52:46 +08:00
return function get(target: any, key: string | symbol, receiver: any) {
const res = Reflect.get(target, key, receiver)
if (typeof key === 'symbol' && builtInSymbols.has(key)) {
return res
}
2019-08-16 21:42:46 +08:00
if (isRef(res)) {
2019-05-29 17:36:53 +08:00
return res.value
}
2018-09-21 21:52:46 +08:00
track(target, OperationTypes.GET, key)
return isObject(res)
2018-09-21 21:52:46 +08:00
? isImmutable
2019-08-16 21:42:46 +08:00
? // need to lazy access immutable and reactive here to avoid
2018-09-21 21:52:46 +08:00
// circular dependency
2019-08-16 21:42:46 +08:00
immutable(res)
: reactive(res)
2018-09-21 21:52:46 +08:00
: res
2018-09-19 23:35:38 +08:00
}
}
function set(
target: any,
key: string | symbol,
value: any,
receiver: any
): boolean {
value = toRaw(value)
2018-09-19 23:35:38 +08:00
const hadKey = hasOwnProperty.call(target, key)
const oldValue = target[key]
2019-08-16 21:42:46 +08:00
if (isRef(oldValue) && !isRef(value)) {
oldValue.value = value
2019-05-29 17:36:53 +08:00
return true
}
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
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) {
trigger(target, OperationTypes.ADD, key, extraInfo)
} else if (value !== oldValue) {
trigger(target, OperationTypes.SET, key, extraInfo)
}
} else {
if (!hadKey) {
trigger(target, OperationTypes.ADD, key)
} else if (value !== oldValue) {
trigger(target, OperationTypes.SET, key)
}
}
}
return result
}
function deleteProperty(target: any, key: string | symbol): boolean {
const hadKey = hasOwnProperty.call(target, key)
const oldValue = target[key]
const result = Reflect.deleteProperty(target, key)
if (hadKey) {
2018-09-21 21:52:46 +08:00
/* istanbul ignore else */
2018-09-19 23:35:38 +08:00
if (__DEV__) {
trigger(target, OperationTypes.DELETE, key, { oldValue })
} else {
trigger(target, OperationTypes.DELETE, key)
}
}
return result
}
function has(target: any, key: string | symbol): boolean {
const result = Reflect.has(target, key)
track(target, OperationTypes.HAS, key)
return result
}
function ownKeys(target: any): (string | number | symbol)[] {
track(target, OperationTypes.ITERATE)
return Reflect.ownKeys(target)
}
export const mutableHandlers: ProxyHandler<any> = {
get: createGetter(false),
2018-09-19 23:35:38 +08:00
set,
deleteProperty,
has,
ownKeys
}
export const immutableHandlers: ProxyHandler<any> = {
get: createGetter(true),
2018-09-19 23:35:38 +08:00
set(target: any, key: string | symbol, value: any, receiver: any): boolean {
if (LOCKED) {
if (__DEV__) {
console.warn(
`Set operation on key "${key as any}" failed: target is immutable.`,
target
)
2018-09-19 23:35:38 +08:00
}
return true
} else {
return set(target, key, value, receiver)
}
},
deleteProperty(target: any, key: string | symbol): boolean {
if (LOCKED) {
if (__DEV__) {
console.warn(
`Delete operation on key "${key as any}" failed: target is immutable.`,
target
)
2018-09-19 23:35:38 +08:00
}
return true
} else {
return deleteProperty(target, key)
}
},
has,
ownKeys
}