import { reactive, readonly, toRaw } from './reactive' import { TrackOpTypes, TriggerOpTypes } from './operations' import { track, trigger, ITERATE_KEY } from './effect' import { LOCKED } from './lock' import { isObject, hasOwn, isSymbol, hasChanged } from '@vue/shared' import { isRef } from './ref' const builtInSymbols = new Set( Object.getOwnPropertyNames(Symbol) .map(key => (Symbol as any)[key]) .filter(isSymbol) ) function createGetter(isReadonly: boolean, shallow = false) { return function get(target: object, key: string | symbol, receiver: object) { let res = Reflect.get(target, key, receiver) if (isSymbol(key) && builtInSymbols.has(key)) { return res } if (shallow) { track(target, TrackOpTypes.GET, key) // TODO strict mode that returns a shallow-readonly version of the value return res } if (isRef(res)) { return res.value } track(target, TrackOpTypes.GET, key) return isObject(res) ? isReadonly ? // need to lazy access readonly and reactive here to avoid // circular dependency readonly(res) : reactive(res) : res } } function set( target: object, key: string | symbol, value: unknown, receiver: object ): boolean { value = toRaw(value) const oldValue = (target as any)[key] if (isRef(oldValue) && !isRef(value)) { oldValue.value = value return true } 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)) { /* istanbul ignore else */ if (__DEV__) { const extraInfo = { oldValue, newValue: value } if (!hadKey) { trigger(target, TriggerOpTypes.ADD, key, extraInfo) } else if (hasChanged(value, oldValue)) { trigger(target, TriggerOpTypes.SET, key, extraInfo) } } else { if (!hadKey) { trigger(target, TriggerOpTypes.ADD, key) } else if (hasChanged(value, oldValue)) { trigger(target, TriggerOpTypes.SET, key) } } } return result } function deleteProperty(target: object, key: string | symbol): boolean { const hadKey = hasOwn(target, key) const oldValue = (target as any)[key] const result = Reflect.deleteProperty(target, key) if (result && hadKey) { /* istanbul ignore else */ if (__DEV__) { trigger(target, TriggerOpTypes.DELETE, key, { oldValue }) } else { trigger(target, TriggerOpTypes.DELETE, key) } } return result } function has(target: object, key: string | symbol): boolean { const result = Reflect.has(target, key) track(target, TrackOpTypes.HAS, key) return result } function ownKeys(target: object): (string | number | symbol)[] { track(target, TrackOpTypes.ITERATE, ITERATE_KEY) return Reflect.ownKeys(target) } export const mutableHandlers: ProxyHandler = { get: createGetter(false), set, deleteProperty, has, ownKeys } export const readonlyHandlers: ProxyHandler = { get: createGetter(true), set( target: object, key: string | symbol, value: unknown, receiver: object ): boolean { if (LOCKED) { if (__DEV__) { console.warn( `Set operation on key "${String(key)}" failed: target is readonly.`, target ) } return true } else { return set(target, key, value, receiver) } }, deleteProperty(target: object, key: string | symbol): boolean { if (LOCKED) { if (__DEV__) { console.warn( `Delete operation on key "${String( key )}" failed: target is readonly.`, target ) } return true } else { return deleteProperty(target, key) } }, has, ownKeys } // 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 = { ...readonlyHandlers, get: createGetter(true, true) }