refactor(reactivity): change literal flag properties to enum flag pro…

…perties

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 {