From e8e736102c84898fb468e540e254c2dbf69d3f96 Mon Sep 17 00:00:00 2001 From: Yang Mingshan Date: Mon, 18 Sep 2023 17:24:13 +0800 Subject: [PATCH] refactor(reactivity): remove const enum --- .../reactivity/__tests__/computed.spec.ts | 14 ++-- packages/reactivity/__tests__/effect.spec.ts | 12 ++-- packages/reactivity/src/baseHandlers.ts | 30 ++++---- packages/reactivity/src/collectionHandlers.ts | 68 +++++++++---------- packages/reactivity/src/computed.ts | 6 +- packages/reactivity/src/deferredComputed.ts | 4 +- packages/reactivity/src/effect.ts | 16 ++--- packages/reactivity/src/operations.ts | 8 +++ packages/reactivity/src/reactive.ts | 55 ++++++++------- packages/reactivity/src/ref.ts | 5 +- .../__tests__/apiLifecycle.spec.ts | 15 ++-- .../runtime-core/__tests__/apiWatch.spec.ts | 12 ++-- packages/runtime-core/src/apiWatch.ts | 3 +- packages/runtime-core/src/compat/global.ts | 13 +--- packages/runtime-core/src/component.ts | 7 +- packages/runtime-core/src/componentProps.ts | 9 +-- .../src/componentPublicInstance.ts | 5 +- packages/runtime-core/src/componentSlots.ts | 3 +- packages/runtime-core/src/vnode.ts | 4 +- 19 files changed, 131 insertions(+), 158 deletions(-) diff --git a/packages/reactivity/__tests__/computed.spec.ts b/packages/reactivity/__tests__/computed.spec.ts index c044b5feb35..ed54890461b 100644 --- a/packages/reactivity/__tests__/computed.spec.ts +++ b/packages/reactivity/__tests__/computed.spec.ts @@ -7,9 +7,7 @@ import { isReadonly, DebuggerEvent, toRaw, - TrackOpTypes, - ITERATE_KEY, - TriggerOpTypes + ITERATE_KEY } from '../src' describe('reactivity/computed', () => { @@ -236,19 +234,19 @@ describe('reactivity/computed', () => { { effect: c.effect, target: toRaw(obj), - type: TrackOpTypes.GET, + type: 'get', key: 'foo' }, { effect: c.effect, target: toRaw(obj), - type: TrackOpTypes.HAS, + type: 'has', key: 'bar' }, { effect: c.effect, target: toRaw(obj), - type: TrackOpTypes.ITERATE, + type: 'iterate', key: ITERATE_KEY } ]) @@ -271,7 +269,7 @@ describe('reactivity/computed', () => { expect(events[0]).toEqual({ effect: c.effect, target: toRaw(obj), - type: TriggerOpTypes.SET, + type: 'set', key: 'foo', oldValue: 1, newValue: 2 @@ -283,7 +281,7 @@ describe('reactivity/computed', () => { expect(events[1]).toEqual({ effect: c.effect, target: toRaw(obj), - type: TriggerOpTypes.DELETE, + type: 'delete', key: 'foo', oldValue: 2 }) diff --git a/packages/reactivity/__tests__/effect.spec.ts b/packages/reactivity/__tests__/effect.spec.ts index 635e6534abe..7a0d841fcd9 100644 --- a/packages/reactivity/__tests__/effect.spec.ts +++ b/packages/reactivity/__tests__/effect.spec.ts @@ -4,8 +4,6 @@ import { effect, stop, toRaw, - TrackOpTypes, - TriggerOpTypes, DebuggerEvent, markRaw, shallowReactive, @@ -732,19 +730,19 @@ describe('reactivity/effect', () => { { effect: runner.effect, target: toRaw(obj), - type: TrackOpTypes.GET, + type: 'get', key: 'foo' }, { effect: runner.effect, target: toRaw(obj), - type: TrackOpTypes.HAS, + type: 'has', key: 'bar' }, { effect: runner.effect, target: toRaw(obj), - type: TrackOpTypes.ITERATE, + type: 'iterate', key: ITERATE_KEY } ]) @@ -770,7 +768,7 @@ describe('reactivity/effect', () => { expect(events[0]).toEqual({ effect: runner.effect, target: toRaw(obj), - type: TriggerOpTypes.SET, + type: 'set', key: 'foo', oldValue: 1, newValue: 2 @@ -782,7 +780,7 @@ describe('reactivity/effect', () => { expect(events[1]).toEqual({ effect: runner.effect, target: toRaw(obj), - type: TriggerOpTypes.DELETE, + type: 'delete', key: 'foo', oldValue: 2 }) diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts index 259b44a1edc..5121281e8c4 100644 --- a/packages/reactivity/src/baseHandlers.ts +++ b/packages/reactivity/src/baseHandlers.ts @@ -2,7 +2,6 @@ import { reactive, readonly, toRaw, - ReactiveFlags, Target, readonlyMap, reactiveMap, @@ -11,7 +10,6 @@ import { isReadonly, isShallow } from './reactive' -import { TrackOpTypes, TriggerOpTypes } from './operations' import { track, trigger, @@ -54,7 +52,7 @@ function createArrayInstrumentations() { instrumentations[key] = function (this: unknown[], ...args: unknown[]) { const arr = toRaw(this) as any for (let i = 0, l = this.length; i < l; i++) { - track(arr, TrackOpTypes.GET, i + '') + track(arr, 'get', i + '') } // we run the method using the original args first (which may be reactive) const res = arr[key](...args) @@ -81,7 +79,7 @@ function createArrayInstrumentations() { function hasOwnProperty(this: object, key: string) { const obj = toRaw(this) - track(obj, TrackOpTypes.HAS, key) + track(obj, 'has', key) return obj.hasOwnProperty(key) } @@ -94,14 +92,14 @@ class BaseReactiveHandler implements ProxyHandler { get(target: Target, key: string | symbol, receiver: object) { const isReadonly = this._isReadonly, shallow = this._shallow - if (key === ReactiveFlags.IS_REACTIVE) { + if (key === '__v_isReactive') { return !isReadonly - } else if (key === ReactiveFlags.IS_READONLY) { + } else if (key === '__v_isReadonly') { return isReadonly - } else if (key === ReactiveFlags.IS_SHALLOW) { + } else if (key === '__v_isShallow') { return shallow } else if ( - key === ReactiveFlags.RAW && + key === '__v_raw' && receiver === (isReadonly ? shallow @@ -133,7 +131,7 @@ class BaseReactiveHandler implements ProxyHandler { } if (!isReadonly) { - track(target, TrackOpTypes.GET, key) + track(target, 'get', key) } if (shallow) { @@ -192,9 +190,9 @@ class MutableReactiveHandler extends BaseReactiveHandler { // 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) + trigger(target, 'add', key, value) } else if (hasChanged(value, oldValue)) { - trigger(target, TriggerOpTypes.SET, key, value, oldValue) + trigger(target, 'set', key, value, oldValue) } } return result @@ -205,7 +203,7 @@ class MutableReactiveHandler extends BaseReactiveHandler { const oldValue = (target as any)[key] const result = Reflect.deleteProperty(target, key) if (result && hadKey) { - trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue) + trigger(target, 'delete', key, undefined, oldValue) } return result } @@ -213,16 +211,12 @@ class MutableReactiveHandler extends BaseReactiveHandler { has(target: object, key: string | symbol): boolean { const result = Reflect.has(target, key) if (!isSymbol(key) || !builtInSymbols.has(key)) { - track(target, TrackOpTypes.HAS, key) + track(target, 'has', key) } return result } ownKeys(target: object): (string | symbol)[] { - track( - target, - TrackOpTypes.ITERATE, - isArray(target) ? 'length' : ITERATE_KEY - ) + track(target, 'iterate', isArray(target) ? 'length' : ITERATE_KEY) return Reflect.ownKeys(target) } } diff --git a/packages/reactivity/src/collectionHandlers.ts b/packages/reactivity/src/collectionHandlers.ts index 1d07af3be8c..b5ab334da42 100644 --- a/packages/reactivity/src/collectionHandlers.ts +++ b/packages/reactivity/src/collectionHandlers.ts @@ -1,6 +1,6 @@ -import { toRaw, ReactiveFlags, toReactive, toReadonly } from './reactive' +import { toRaw, toReactive, toReadonly } from './reactive' import { track, trigger, ITERATE_KEY, MAP_KEY_ITERATE_KEY } from './effect' -import { TrackOpTypes, TriggerOpTypes } from './operations' +import { TriggerOpTypesUnion } from './operations' import { capitalize, hasOwn, hasChanged, toRawType, isMap } from '@vue/shared' export type CollectionTypes = IterableCollections | WeakCollections @@ -23,14 +23,14 @@ function get( ) { // #1772: readonly(reactive(Map)) should return readonly + reactive version // of the value - target = (target as any)[ReactiveFlags.RAW] + target = (target as any).__v_raw const rawTarget = toRaw(target) const rawKey = toRaw(key) if (!isReadonly) { if (hasChanged(key, rawKey)) { - track(rawTarget, TrackOpTypes.GET, key) + track(rawTarget, 'get', key) } - track(rawTarget, TrackOpTypes.GET, rawKey) + track(rawTarget, 'get', rawKey) } const { has } = getProto(rawTarget) const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive @@ -46,14 +46,14 @@ function get( } function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean { - const target = (this as any)[ReactiveFlags.RAW] + const target = (this as any).__v_raw const rawTarget = toRaw(target) const rawKey = toRaw(key) if (!isReadonly) { if (hasChanged(key, rawKey)) { - track(rawTarget, TrackOpTypes.HAS, key) + track(rawTarget, 'has', key) } - track(rawTarget, TrackOpTypes.HAS, rawKey) + track(rawTarget, 'has', rawKey) } return key === rawKey ? target.has(key) @@ -61,8 +61,8 @@ function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean { } function size(target: IterableCollections, isReadonly = false) { - target = (target as any)[ReactiveFlags.RAW] - !isReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY) + target = (target as any).__v_raw + !isReadonly && track(toRaw(target), 'iterate', ITERATE_KEY) return Reflect.get(target, 'size', target) } @@ -73,7 +73,7 @@ function add(this: SetTypes, value: unknown) { const hadKey = proto.has.call(target, value) if (!hadKey) { target.add(value) - trigger(target, TriggerOpTypes.ADD, value, value) + trigger(target, 'add', value, value) } return this } @@ -94,9 +94,9 @@ function set(this: MapTypes, key: unknown, value: unknown) { const oldValue = get.call(target, key) target.set(key, value) if (!hadKey) { - trigger(target, TriggerOpTypes.ADD, key, value) + trigger(target, 'add', key, value) } else if (hasChanged(value, oldValue)) { - trigger(target, TriggerOpTypes.SET, key, value, oldValue) + trigger(target, 'set', key, value, oldValue) } return this } @@ -116,7 +116,7 @@ function deleteEntry(this: CollectionTypes, key: unknown) { // forward the operation before queueing reactions const result = target.delete(key) if (hadKey) { - trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue) + trigger(target, 'delete', key, undefined, oldValue) } return result } @@ -132,7 +132,7 @@ function clear(this: IterableCollections) { // forward the operation before queueing reactions const result = target.clear() if (hadItems) { - trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget) + trigger(target, 'clear', undefined, undefined, oldTarget) } return result } @@ -144,10 +144,10 @@ function createForEach(isReadonly: boolean, isShallow: boolean) { thisArg?: unknown ) { const observed = this as any - const target = observed[ReactiveFlags.RAW] + const target = observed.__v_raw const rawTarget = toRaw(target) const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive - !isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY) + !isReadonly && track(rawTarget, 'iterate', ITERATE_KEY) return target.forEach((value: unknown, key: unknown) => { // important: make sure the callback is // 1. invoked with the reactive map as `this` and 3rd arg @@ -179,7 +179,7 @@ function createIterableMethod( this: IterableCollections, ...args: unknown[] ): Iterable & Iterator { - const target = (this as any)[ReactiveFlags.RAW] + const target = (this as any).__v_raw const rawTarget = toRaw(target) const targetIsMap = isMap(rawTarget) const isPair = @@ -188,11 +188,7 @@ function createIterableMethod( const innerIterator = target[method](...args) const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive !isReadonly && - track( - rawTarget, - TrackOpTypes.ITERATE, - isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY - ) + track(rawTarget, 'iterate', isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY) // return a wrapped iterator which returns observed versions of the // values emitted from the real iterator return { @@ -214,7 +210,7 @@ function createIterableMethod( } } -function createReadonlyMethod(type: TriggerOpTypes): Function { +function createReadonlyMethod(type: TriggerOpTypesUnion): Function { return function (this: CollectionTypes, ...args: unknown[]) { if (__DEV__) { const key = args[0] ? `on key "${args[0]}" ` : `` @@ -223,7 +219,7 @@ function createReadonlyMethod(type: TriggerOpTypes): Function { toRaw(this) ) } - return type === TriggerOpTypes.DELETE ? false : this + return type === 'delete' ? false : this } } @@ -268,10 +264,10 @@ function createInstrumentations() { has(this: MapTypes, key: unknown) { return has.call(this, key, true) }, - add: createReadonlyMethod(TriggerOpTypes.ADD), - set: createReadonlyMethod(TriggerOpTypes.SET), - delete: createReadonlyMethod(TriggerOpTypes.DELETE), - clear: createReadonlyMethod(TriggerOpTypes.CLEAR), + add: createReadonlyMethod('add'), + set: createReadonlyMethod('set'), + delete: createReadonlyMethod('delete'), + clear: createReadonlyMethod('clear'), forEach: createForEach(true, false) } @@ -285,10 +281,10 @@ function createInstrumentations() { has(this: MapTypes, key: unknown) { return has.call(this, key, true) }, - add: createReadonlyMethod(TriggerOpTypes.ADD), - set: createReadonlyMethod(TriggerOpTypes.SET), - delete: createReadonlyMethod(TriggerOpTypes.DELETE), - clear: createReadonlyMethod(TriggerOpTypes.CLEAR), + add: createReadonlyMethod('add'), + set: createReadonlyMethod('set'), + delete: createReadonlyMethod('delete'), + clear: createReadonlyMethod('clear'), forEach: createForEach(true, true) } @@ -345,11 +341,11 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) { key: string | symbol, receiver: CollectionTypes ) => { - if (key === ReactiveFlags.IS_REACTIVE) { + if (key === '__v_isReactive') { return !isReadonly - } else if (key === ReactiveFlags.IS_READONLY) { + } else if (key === '__v_isReadonly') { return isReadonly - } else if (key === ReactiveFlags.RAW) { + } else if (key === '__v_raw') { return target } diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts index b24484c9e62..1cec382ccc6 100644 --- a/packages/reactivity/src/computed.ts +++ b/packages/reactivity/src/computed.ts @@ -1,7 +1,7 @@ import { DebuggerOptions, ReactiveEffect } from './effect' import { Ref, trackRefValue, triggerRefValue } from './ref' import { isFunction, NOOP } from '@vue/shared' -import { ReactiveFlags, toRaw } from './reactive' +import { toRaw } from './reactive' import { Dep } from './dep' declare const ComputedRefSymbol: unique symbol @@ -30,7 +30,7 @@ export class ComputedRefImpl { public readonly effect: ReactiveEffect public readonly __v_isRef = true - public readonly [ReactiveFlags.IS_READONLY]: boolean = false + public readonly __v_isReadonly: boolean = false public _dirty = true public _cacheable: boolean @@ -49,7 +49,7 @@ export class ComputedRefImpl { }) this.effect.computed = this this.effect.active = this._cacheable = !isSSR - this[ReactiveFlags.IS_READONLY] = isReadonly + this.__v_isReadonly = isReadonly } get value() { diff --git a/packages/reactivity/src/deferredComputed.ts b/packages/reactivity/src/deferredComputed.ts index a23122046a4..22b3e8754af 100644 --- a/packages/reactivity/src/deferredComputed.ts +++ b/packages/reactivity/src/deferredComputed.ts @@ -1,7 +1,7 @@ import { Dep } from './dep' import { ReactiveEffect } from './effect' import { ComputedGetter, ComputedRef } from './computed' -import { ReactiveFlags, toRaw } from './reactive' +import { toRaw } from './reactive' import { trackRefValue, triggerRefValue } from './ref' const tick = /*#__PURE__*/ Promise.resolve() @@ -32,7 +32,7 @@ class DeferredComputedRefImpl { public readonly effect: ReactiveEffect public readonly __v_isRef = true - public readonly [ReactiveFlags.IS_READONLY] = true + public readonly __v_isReadonly = true constructor(getter: ComputedGetter) { let compareTarget: any diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts index bbac96a4b2a..a726b4a65c8 100644 --- a/packages/reactivity/src/effect.ts +++ b/packages/reactivity/src/effect.ts @@ -1,4 +1,4 @@ -import { TrackOpTypes, TriggerOpTypes } from './operations' +import { TrackOpTypesUnion, TriggerOpTypesUnion } from './operations' import { extend, isArray, isIntegerKey, isMap } from '@vue/shared' import { EffectScope, recordEffectScope } from './effectScope' import { @@ -38,7 +38,7 @@ export type DebuggerEvent = { export type DebuggerEventExtraInfo = { target: object - type: TrackOpTypes | TriggerOpTypes + type: TrackOpTypesUnion | TriggerOpTypesUnion key: any newValue?: any oldValue?: any @@ -244,7 +244,7 @@ export function resetTracking() { * @param type - Defines the type of access to the reactive property. * @param key - Identifier of the reactive property to track. */ -export function track(target: object, type: TrackOpTypes, key: unknown) { +export function track(target: object, type: TrackOpTypesUnion, key: unknown) { if (shouldTrack && activeEffect) { let depsMap = targetMap.get(target) if (!depsMap) { @@ -304,7 +304,7 @@ export function trackEffects( */ export function trigger( target: object, - type: TriggerOpTypes, + type: TriggerOpTypesUnion, key?: unknown, newValue?: unknown, oldValue?: unknown, @@ -317,7 +317,7 @@ export function trigger( } let deps: (Dep | undefined)[] = [] - if (type === TriggerOpTypes.CLEAR) { + if (type === 'clear') { // collection being cleared // trigger all effects for target deps = [...depsMap.values()] @@ -336,7 +336,7 @@ export function trigger( // also run for iteration key on ADD | DELETE | Map.SET switch (type) { - case TriggerOpTypes.ADD: + case 'add': if (!isArray(target)) { deps.push(depsMap.get(ITERATE_KEY)) if (isMap(target)) { @@ -347,7 +347,7 @@ export function trigger( deps.push(depsMap.get('length')) } break - case TriggerOpTypes.DELETE: + case 'delete': if (!isArray(target)) { deps.push(depsMap.get(ITERATE_KEY)) if (isMap(target)) { @@ -355,7 +355,7 @@ export function trigger( } } break - case TriggerOpTypes.SET: + case 'set': if (isMap(target)) { deps.push(depsMap.get(ITERATE_KEY)) } diff --git a/packages/reactivity/src/operations.ts b/packages/reactivity/src/operations.ts index 1b96e982571..ba554e3998c 100644 --- a/packages/reactivity/src/operations.ts +++ b/packages/reactivity/src/operations.ts @@ -1,15 +1,23 @@ // using literal strings instead of numbers so that it's easier to inspect // debugger events +/** + * @deprecated use string literal instead. + */ export const enum TrackOpTypes { GET = 'get', HAS = 'has', ITERATE = 'iterate' } +export type TrackOpTypesUnion = 'get' | 'has' | 'iterate' +/** + * @deprecated use string literal instead. + */ export const enum TriggerOpTypes { SET = 'set', ADD = 'add', DELETE = 'delete', CLEAR = 'clear' } +export type TriggerOpTypesUnion = 'set' | 'add' | 'delete' | 'clear' diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts index 1881955cf1c..31687bd1919 100644 --- a/packages/reactivity/src/reactive.ts +++ b/packages/reactivity/src/reactive.ts @@ -13,6 +13,9 @@ import { } from './collectionHandlers' import type { UnwrapRefSimple, Ref, RawSymbol } from './ref' +/** + * @deprecated use string literal instead. + */ export const enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive', @@ -22,11 +25,11 @@ export const enum ReactiveFlags { } export interface Target { - [ReactiveFlags.SKIP]?: boolean - [ReactiveFlags.IS_REACTIVE]?: boolean - [ReactiveFlags.IS_READONLY]?: boolean - [ReactiveFlags.IS_SHALLOW]?: boolean - [ReactiveFlags.RAW]?: any + __v_skip?: boolean + __v_isReactive?: boolean + __v_isReadonly?: boolean + __v_isShallow?: boolean + __v_raw?: boolean } export const reactiveMap = new WeakMap() @@ -34,30 +37,29 @@ export const shallowReactiveMap = new WeakMap() export const readonlyMap = new WeakMap() export const shallowReadonlyMap = new WeakMap() -const enum TargetType { - INVALID = 0, - COMMON = 1, - COLLECTION = 2 -} +type TargetTypeUnion = + | 0 // INVALID + | 1 // COMMON + | 2 // COLLECTION -function targetTypeMap(rawType: string) { +function targetTypeMap(rawType: string): TargetTypeUnion { switch (rawType) { case 'Object': case 'Array': - return TargetType.COMMON + return 1 case 'Map': case 'Set': case 'WeakMap': case 'WeakSet': - return TargetType.COLLECTION + return 2 default: - return TargetType.INVALID + return 0 } } function getTargetType(value: Target) { - return value[ReactiveFlags.SKIP] || !Object.isExtensible(value) - ? TargetType.INVALID + return value.__v_skip || !Object.isExtensible(value) + ? 0 : targetTypeMap(toRawType(value)) } @@ -260,10 +262,7 @@ function createReactiveObject( } // target is already a Proxy, return it. // exception: calling readonly() on a reactive object - if ( - target[ReactiveFlags.RAW] && - !(isReadonly && target[ReactiveFlags.IS_REACTIVE]) - ) { + if (target.__v_raw && !(isReadonly && target.__v_isReactive)) { return target } // target already has corresponding Proxy @@ -273,12 +272,12 @@ function createReactiveObject( } // only specific value types can be observed. const targetType = getTargetType(target) - if (targetType === TargetType.INVALID) { + if (targetType === 0) { return target } const proxy = new Proxy( target, - targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers + targetType === 2 ? collectionHandlers : baseHandlers ) proxyMap.set(target, proxy) return proxy @@ -304,9 +303,9 @@ function createReactiveObject( */ export function isReactive(value: unknown): boolean { if (isReadonly(value)) { - return isReactive((value as Target)[ReactiveFlags.RAW]) + return isReactive((value as Target).__v_raw) } - return !!(value && (value as Target)[ReactiveFlags.IS_REACTIVE]) + return !!(value && (value as Target).__v_isReactive) } /** @@ -321,11 +320,11 @@ export function isReactive(value: unknown): boolean { * @see {@link https://vuejs.org/api/reactivity-utilities.html#isreadonly} */ export function isReadonly(value: unknown): boolean { - return !!(value && (value as Target)[ReactiveFlags.IS_READONLY]) + return !!(value && (value as Target).__v_isReadonly) } export function isShallow(value: unknown): boolean { - return !!(value && (value as Target)[ReactiveFlags.IS_SHALLOW]) + return !!(value && (value as Target).__v_isShallow) } /** @@ -363,7 +362,7 @@ export function isProxy(value: unknown): boolean { * @see {@link https://vuejs.org/api/reactivity-advanced.html#toraw} */ export function toRaw(observed: T): T { - const raw = observed && (observed as Target)[ReactiveFlags.RAW] + const raw: any = observed && (observed as Target).__v_raw return raw ? toRaw(raw) : observed } @@ -392,7 +391,7 @@ export type Raw = T & { [RawSymbol]?: true } * @see {@link https://vuejs.org/api/reactivity-advanced.html#markraw} */ export function markRaw(value: T): Raw { - def(value, ReactiveFlags.SKIP, true) + def(value, '__v_skip', true) return value } diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts index 915f5760878..15207de2e69 100644 --- a/packages/reactivity/src/ref.ts +++ b/packages/reactivity/src/ref.ts @@ -5,7 +5,6 @@ import { trackEffects, triggerEffects } from './effect' -import { TrackOpTypes, TriggerOpTypes } from './operations' import { isArray, hasChanged, IfAny, isFunction, isObject } from '@vue/shared' import { isProxy, @@ -43,7 +42,7 @@ export function trackRefValue(ref: RefBase) { if (__DEV__) { trackEffects(ref.dep || (ref.dep = createDep()), { target: ref, - type: TrackOpTypes.GET, + type: 'get', key: 'value' }) } else { @@ -59,7 +58,7 @@ export function triggerRefValue(ref: RefBase, newVal?: any) { if (__DEV__) { triggerEffects(dep, { target: ref, - type: TriggerOpTypes.SET, + type: 'set', key: 'value', newValue: newVal }) diff --git a/packages/runtime-core/__tests__/apiLifecycle.spec.ts b/packages/runtime-core/__tests__/apiLifecycle.spec.ts index b61632ae3fe..287320ae938 100644 --- a/packages/runtime-core/__tests__/apiLifecycle.spec.ts +++ b/packages/runtime-core/__tests__/apiLifecycle.spec.ts @@ -13,10 +13,9 @@ import { onUnmounted, onRenderTracked, reactive, - TrackOpTypes, onRenderTriggered } from '@vue/runtime-test' -import { ITERATE_KEY, DebuggerEvent, TriggerOpTypes } from '@vue/reactivity' +import { ITERATE_KEY, DebuggerEvent } from '@vue/reactivity' // reference: https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks @@ -315,17 +314,17 @@ describe('api: lifecycle hooks', () => { expect(events).toMatchObject([ { target: obj, - type: TrackOpTypes.GET, + type: 'get', key: 'foo' }, { target: obj, - type: TrackOpTypes.HAS, + type: 'has', key: 'bar' }, { target: obj, - type: TrackOpTypes.ITERATE, + type: 'iterate', key: ITERATE_KEY } ]) @@ -355,7 +354,7 @@ describe('api: lifecycle hooks', () => { await nextTick() expect(onTrigger).toHaveBeenCalledTimes(1) expect(events[0]).toMatchObject({ - type: TriggerOpTypes.SET, + type: 'set', key: 'foo', oldValue: 1, newValue: 2 @@ -365,7 +364,7 @@ describe('api: lifecycle hooks', () => { await nextTick() expect(onTrigger).toHaveBeenCalledTimes(2) expect(events[1]).toMatchObject({ - type: TriggerOpTypes.DELETE, + type: 'delete', key: 'bar', oldValue: 2 }) @@ -373,7 +372,7 @@ describe('api: lifecycle hooks', () => { await nextTick() expect(onTrigger).toHaveBeenCalledTimes(3) expect(events[2]).toMatchObject({ - type: TriggerOpTypes.ADD, + type: 'add', key: 'baz', newValue: 3 }) diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index f24ce80b9df..291f6a3cfb3 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/packages/runtime-core/__tests__/apiWatch.spec.ts @@ -24,8 +24,6 @@ import { import { ITERATE_KEY, DebuggerEvent, - TrackOpTypes, - TriggerOpTypes, triggerRef, shallowRef, Ref, @@ -815,17 +813,17 @@ describe('api: watch', () => { expect(events).toMatchObject([ { target: obj, - type: TrackOpTypes.GET, + type: 'get', key: 'foo' }, { target: obj, - type: TrackOpTypes.HAS, + type: 'has', key: 'bar' }, { target: obj, - type: TrackOpTypes.ITERATE, + type: 'iterate', key: ITERATE_KEY } ]) @@ -852,7 +850,7 @@ describe('api: watch', () => { expect(dummy).toBe(2) expect(onTrigger).toHaveBeenCalledTimes(1) expect(events[0]).toMatchObject({ - type: TriggerOpTypes.SET, + type: 'set', key: 'foo', oldValue: 1, newValue: 2 @@ -863,7 +861,7 @@ describe('api: watch', () => { expect(dummy).toBeUndefined() expect(onTrigger).toHaveBeenCalledTimes(2) expect(events[1]).toMatchObject({ - type: TriggerOpTypes.DELETE, + type: 'delete', key: 'foo', oldValue: 2 }) diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index 1b85ba12d19..47f6f4965af 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -5,7 +5,6 @@ import { ComputedRef, ReactiveEffect, isReactive, - ReactiveFlags, EffectScheduler, DebuggerOptions, getCurrentScope @@ -438,7 +437,7 @@ export function createPathGetter(ctx: any, path: string) { } export function traverse(value: unknown, seen?: Set) { - if (!isObject(value) || (value as any)[ReactiveFlags.SKIP]) { + if (!isObject(value) || (value as any).__v_skip) { return value } seen = seen || new Set() diff --git a/packages/runtime-core/src/compat/global.ts b/packages/runtime-core/src/compat/global.ts index 9f1a6d1cd12..815e52faa31 100644 --- a/packages/runtime-core/src/compat/global.ts +++ b/packages/runtime-core/src/compat/global.ts @@ -1,11 +1,4 @@ -import { - isReactive, - reactive, - track, - TrackOpTypes, - trigger, - TriggerOpTypes -} from '@vue/reactivity' +import { isReactive, reactive, track, trigger } from '@vue/reactivity' import { isFunction, extend, @@ -643,12 +636,12 @@ function defineReactiveSimple(obj: any, key: string, val: any) { enumerable: true, configurable: true, get() { - track(obj, TrackOpTypes.GET, key) + track(obj, 'get', key) return val }, set(newVal) { val = isObject(newVal) ? reactive(newVal) : newVal - trigger(obj, TriggerOpTypes.SET, key, newVal) + trigger(obj, 'set', key, newVal) } }) } diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 57a53a39b76..4c0f1c898b8 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -8,7 +8,6 @@ import { EffectScope, markRaw, track, - TrackOpTypes, ReactiveEffect } from '@vue/reactivity' import { @@ -942,7 +941,7 @@ function getAttrsProxy(instance: ComponentInternalInstance): Data { ? { get(target, key: string) { markAttrsAccessed() - track(instance, TrackOpTypes.GET, '$attrs') + track(instance, 'get', '$attrs') return target[key] }, set() { @@ -956,7 +955,7 @@ function getAttrsProxy(instance: ComponentInternalInstance): Data { } : { get(target, key: string) { - track(instance, TrackOpTypes.GET, '$attrs') + track(instance, 'get', '$attrs') return target[key] } } @@ -972,7 +971,7 @@ function getSlotsProxy(instance: ComponentInternalInstance): Slots { instance.slotsProxy || (instance.slotsProxy = new Proxy(instance.slots, { get(target, key: string) { - track(instance, TrackOpTypes.GET, '$slots') + track(instance, 'get', '$slots') return target[key] } })) diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts index 4d402789555..c6421d718c4 100644 --- a/packages/runtime-core/src/componentProps.ts +++ b/packages/runtime-core/src/componentProps.ts @@ -1,9 +1,4 @@ -import { - toRaw, - shallowReactive, - trigger, - TriggerOpTypes -} from '@vue/reactivity' +import { toRaw, shallowReactive, trigger } from '@vue/reactivity' import { EMPTY_OBJ, camelize, @@ -361,7 +356,7 @@ export function updateProps( // trigger updates for $attrs in case it's used in component slots if (hasAttrsChanged) { - trigger(instance, TriggerOpTypes.SET, '$attrs') + trigger(instance, 'set', '$attrs') } if (__DEV__) { diff --git a/packages/runtime-core/src/componentPublicInstance.ts b/packages/runtime-core/src/componentPublicInstance.ts index dc575aafff9..cc19b3a0570 100644 --- a/packages/runtime-core/src/componentPublicInstance.ts +++ b/packages/runtime-core/src/componentPublicInstance.ts @@ -21,7 +21,6 @@ import { toRaw, shallowReadonly, track, - TrackOpTypes, ShallowUnwrapRef, UnwrapNestedRefs } from '@vue/reactivity' @@ -354,10 +353,10 @@ export const PublicInstanceProxyHandlers: ProxyHandler = { // public $xxx properties if (publicGetter) { if (key === '$attrs') { - track(instance, TrackOpTypes.GET, key) + track(instance, 'get', key) __DEV__ && markAttrsAccessed() } else if (__DEV__ && key === '$slots') { - track(instance, TrackOpTypes.GET, key) + track(instance, 'get', key) } return publicGetter(instance) } else if ( diff --git a/packages/runtime-core/src/componentSlots.ts b/packages/runtime-core/src/componentSlots.ts index afc5f03933b..9ac681f0713 100644 --- a/packages/runtime-core/src/componentSlots.ts +++ b/packages/runtime-core/src/componentSlots.ts @@ -24,7 +24,6 @@ import { isHmrUpdating } from './hmr' import { DeprecationTypes, isCompatEnabled } from './compat/compatConfig' import { toRaw } from '@vue/reactivity' import { trigger } from '@vue/reactivity' -import { TriggerOpTypes } from '@vue/reactivity' export type Slot = ( ...args: IfAny @@ -203,7 +202,7 @@ export const updateSlots = ( // Parent was HMR updated so slot content may have changed. // force update slots and mark instance for hmr as well extend(slots, children as Slots) - trigger(instance, TriggerOpTypes.SET, '$slots') + trigger(instance, 'set', '$slots') } else if (optimized && type === SlotFlags.STABLE) { // compiled AND stable. // no need to update, and skip stale slots removal. diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index f8cf6652d31..19ac3ced7ae 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -21,7 +21,7 @@ import { isClassComponent } from './component' import { RawSlots } from './componentSlots' -import { isProxy, Ref, toRaw, ReactiveFlags, isRef } from '@vue/reactivity' +import { isProxy, Ref, toRaw, isRef } from '@vue/reactivity' import { AppContext } from './apiCreateApp' import { Suspense, @@ -144,7 +144,7 @@ export interface VNode< /** * @internal */ - [ReactiveFlags.SKIP]: true + __v_skip: true type: VNodeTypes props: (VNodeProps & ExtraProps) | null