chore(reactivity): change literal flag properties to enum flag properties (#10367)

packages/reactivity/src/computed.ts

@@ -47,11 +47,11 @@ export class ComputedRefImpl<T = any> 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<T = any> implements Subscriber {
     private readonly setter: ComputedSetter<T> | undefined,
     isSSR: boolean,
   ) {
-    this.__v_isReadonly = !setter
+    this[ReactiveFlags.IS_READONLY] = !setter
     this.isSSR = isSSR
   }
 

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 {

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<T = any> {
  */
 export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
 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<T = any> {
 
   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<T = any> {
   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<T> {
   private readonly _get: ReturnType<CustomRefFactory<T>>['get']
   private readonly _set: ReturnType<CustomRefFactory<T>>['set']
 
-  public readonly __v_isRef = true
+  public readonly [ReactiveFlags.IS_REF] = true
 
   constructor(factory: CustomRefFactory<T>) {
     const dep = (this.dep = new Dep())
@@ -330,7 +331,7 @@ export function toRefs<T extends object>(object: T): ToRefs<T> {
 }
 
 class ObjectRefImpl<T extends object, K extends keyof T> {
-  public readonly __v_isRef = true
+  public readonly [ReactiveFlags.IS_REF] = true
 
   constructor(
     private readonly _object: T,
@@ -353,8 +354,8 @@ class ObjectRefImpl<T extends object, K extends keyof T> {
 }
 
 class GetterRefImpl<T> {
-  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()

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 {