refactor(reactivity): reuse toReactive helper (#4641)

Author: zhangenming

packages/reactivity/src/collectionHandlers.ts

@@ -1,14 +1,7 @@
-import { toRaw, reactive, readonly, ReactiveFlags } from './reactive'
+import { toRaw, ReactiveFlags, toReactive, toReadonly } from './reactive'
 import { track, trigger, ITERATE_KEY, MAP_KEY_ITERATE_KEY } from './effect'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
-import {
-  isObject,
-  capitalize,
-  hasOwn,
-  hasChanged,
-  toRawType,
-  isMap
-} from '@vue/shared'
+import { capitalize, hasOwn, hasChanged, toRawType, isMap } from '@vue/shared'
 
 export type CollectionTypes = IterableCollections | WeakCollections
 
@@ -17,12 +10,6 @@ type WeakCollections = WeakMap<any, any> | WeakSet<any>
 type MapTypes = Map<any, any> | WeakMap<any, any>
 type SetTypes = Set<any> | WeakSet<any>
 
-const toReactive = <T extends unknown>(value: T): T =>
-  isObject(value) ? reactive(value) : value
-
-const toReadonly = <T extends unknown>(value: T): T =>
-  isObject(value) ? readonly(value as Record<any, any>) : value
-
 const toShallow = <T extends unknown>(value: T): T => value
 
 const getProto = <T extends CollectionTypes>(v: T): any =>

packages/reactivity/src/reactive.ts

@@ -233,3 +233,9 @@ export function markRaw<T extends object>(value: T): T {
   def(value, ReactiveFlags.SKIP, true)
   return value
 }
+
+export const toReactive = <T extends unknown>(value: T): T =>
+  isObject(value) ? reactive(value) : value
+
+export const toReadonly = <T extends unknown>(value: T): T =>
+  isObject(value) ? readonly(value as Record<any, any>) : value

packages/reactivity/src/ref.ts

@@ -1,7 +1,7 @@
 import { isTracking, trackEffects, triggerEffects } from './effect'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { isArray, isObject, hasChanged } from '@vue/shared'
-import { reactive, isProxy, toRaw, isReactive } from './reactive'
+import { isArray, hasChanged } from '@vue/shared'
+import { isProxy, toRaw, isReactive, toReactive } from './reactive'
 import { CollectionTypes } from './collectionHandlers'
 import { createDep, Dep } from './dep'
 
@@ -60,9 +60,6 @@ export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
   }
 }
 
-const convert = <T extends unknown>(val: T): T =>
-  isObject(val) ? reactive(val) : val
-
 export function isRef<T>(r: Ref<T> | unknown): r is Ref<T>
 export function isRef(r: any): r is Ref {
   return Boolean(r && r.__v_isRef === true)
@@ -84,6 +81,13 @@ export function shallowRef(value?: unknown) {
   return createRef(value, true)
 }
 
+function createRef(rawValue: unknown, shallow: boolean) {
+  if (isRef(rawValue)) {
+    return rawValue
+  }
+  return new RefImpl(rawValue, shallow)
+}
+
 class RefImpl<T> {
   private _value: T
   private _rawValue: T
@@ -93,7 +97,7 @@ class RefImpl<T> {
 
   constructor(value: T, public readonly _shallow: boolean) {
     this._rawValue = _shallow ? value : toRaw(value)
-    this._value = _shallow ? value : convert(value)
+    this._value = _shallow ? value : toReactive(value)
   }
 
   get value() {
@@ -105,19 +109,12 @@ class RefImpl<T> {
     newVal = this._shallow ? newVal : toRaw(newVal)
     if (hasChanged(newVal, this._rawValue)) {
       this._rawValue = newVal
-      this._value = this._shallow ? newVal : convert(newVal)
+      this._value = this._shallow ? newVal : toReactive(newVal)
       triggerRefValue(this, newVal)
     }
   }
 }
 
-function createRef(rawValue: unknown, shallow: boolean) {
-  if (isRef(rawValue)) {
-    return rawValue
-  }
-  return new RefImpl(rawValue, shallow)
-}
-
 export function triggerRef(ref: Ref) {
   triggerRefValue(ref, __DEV__ ? ref.value : void 0)
 }