diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts index f3054648b0c..a25c066e739 100644 --- a/packages/reactivity/src/computed.ts +++ b/packages/reactivity/src/computed.ts @@ -47,11 +47,11 @@ export class ComputedRefImpl implements Subscriber { /** * @internal */ - readonly dep = new Dep(this) + readonly dep = new Dep(this); /** * @internal */ - readonly __v_isRef = true; + readonly [ReactiveFlags.IS_REF] = true; /** * @internal */ @@ -96,7 +96,7 @@ export class ComputedRefImpl implements Subscriber { private readonly setter: ComputedSetter | undefined, isSSR: boolean, ) { - this.__v_isReadonly = !setter + this[ReactiveFlags.IS_READONLY] = !setter this.isSSR = isSSR } diff --git a/packages/reactivity/src/constants.ts b/packages/reactivity/src/constants.ts index baa75d61644..8320de287f2 100644 --- a/packages/reactivity/src/constants.ts +++ b/packages/reactivity/src/constants.ts @@ -20,6 +20,7 @@ export enum ReactiveFlags { IS_READONLY = '__v_isReadonly', IS_SHALLOW = '__v_isShallow', RAW = '__v_raw', + IS_REF = '__v_isRef', } export enum DirtyLevels { diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts index 32f79217e7b..bbe613a8cbf 100644 --- a/packages/reactivity/src/ref.ts +++ b/packages/reactivity/src/ref.ts @@ -16,7 +16,7 @@ import { toReactive, } from './reactive' import type { ComputedRef } from './computed' -import { TrackOpTypes, TriggerOpTypes } from './constants' +import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants' import { warn } from './warning' declare const RefSymbol: unique symbol @@ -40,7 +40,7 @@ export interface Ref { */ export function isRef(r: Ref | unknown): r is Ref export function isRef(r: any): r is Ref { - return r ? r.__v_isRef === true : false + return r ? r[ReactiveFlags.IS_REF] === true : false } /** @@ -105,14 +105,13 @@ class RefImpl { dep: Dep = new Dep() - public readonly __v_isRef = true + public readonly [ReactiveFlags.IS_REF] = true + public readonly [ReactiveFlags.IS_SHALLOW]: boolean = false - constructor( - value: T, - public readonly __v_isShallow: boolean, - ) { - this._rawValue = __v_isShallow ? value : toRaw(value) - this._value = __v_isShallow ? value : toReactive(value) + constructor(value: T, isShallow: boolean) { + this._rawValue = isShallow ? value : toRaw(value) + this._value = isShallow ? value : toReactive(value) + this[ReactiveFlags.IS_SHALLOW] = isShallow } get value() { @@ -131,7 +130,9 @@ class RefImpl { set value(newValue) { const oldValue = this._rawValue const useDirectValue = - this.__v_isShallow || isShallow(newValue) || isReadonly(newValue) + this[ReactiveFlags.IS_SHALLOW] || + isShallow(newValue) || + isReadonly(newValue) newValue = useDirectValue ? newValue : toRaw(newValue) if (hasChanged(newValue, oldValue)) { this._rawValue = newValue @@ -277,7 +278,7 @@ class CustomRefImpl { private readonly _get: ReturnType>['get'] private readonly _set: ReturnType>['set'] - public readonly __v_isRef = true + public readonly [ReactiveFlags.IS_REF] = true constructor(factory: CustomRefFactory) { const dep = (this.dep = new Dep()) @@ -330,7 +331,7 @@ export function toRefs(object: T): ToRefs { } class ObjectRefImpl { - public readonly __v_isRef = true + public readonly [ReactiveFlags.IS_REF] = true constructor( private readonly _object: T, @@ -353,8 +354,8 @@ class ObjectRefImpl { } class GetterRefImpl { - public readonly __v_isRef = true - public readonly __v_isReadonly = true + public readonly [ReactiveFlags.IS_REF] = true + public readonly [ReactiveFlags.IS_READONLY] = true constructor(private readonly _getter: () => T) {} get value() { return this._getter() diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts index aff107cd97f..b4ac0c8ffa0 100644 --- a/packages/shared/src/toDisplayString.ts +++ b/packages/shared/src/toDisplayString.ts @@ -1,3 +1,4 @@ +import { ReactiveFlags } from '@vue/reactivity' import { isArray, isFunction, @@ -28,7 +29,7 @@ export const toDisplayString = (val: unknown): string => { const replacer = (_key: string, val: any): any => { // can't use isRef here since @vue/shared has no deps - if (val && val.__v_isRef) { + if (val && val[ReactiveFlags.IS_REF]) { return replacer(_key, val.value) } else if (isMap(val)) { return {