fix(reactivity): ensure that shallow and normal proxies are tracked s…

…eperately close #2843
vuejs · Mar 26, 2021 · 1ff05b4 · 1ff05b4
1 parent 68de9f4
commit 1ff05b4
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/packages/reactivity/__tests__/readonly.spec.ts b/packages/reactivity/__tests__/readonly.spec.ts
@@ -1,6 +1,7 @@
 import {
   reactive,
   readonly,
+  shallowReadonly,
   toRaw,
   isReactive,
   isReadonly,
@@ -454,4 +455,23 @@ describe('reactivity/readonly', () => {
       'Set operation on key "randomProperty" failed: target is readonly.'
     ).toHaveBeenWarned()
   })
+
+  // to retain 2.x behavior.
+  test('should NOT make nested properties readonly', () => {
+    const props = shallowReadonly({ n: { foo: 1 } })
+    // @ts-ignore
+    props.n.foo = 2
+    expect(props.n.foo).toBe(2)
+    expect(
+      `Set operation on key "foo" failed: target is readonly.`
+    ).not.toHaveBeenWarned()
+  })
+
+  test('should allow shallow und normal reactive for same target', () => {
+    const target = { foo: 1 }
+    const shallowProxy = shallowReadonly(target)
+    const normalProxy = readonly(target)
+
+    expect(normalProxy).not.toBe(shallowProxy)
+  })
 })
diff --git a/packages/reactivity/__tests__/shallowReactive.spec.ts b/packages/reactivity/__tests__/shallowReactive.spec.ts
@@ -1,4 +1,5 @@
-import { shallowReactive, isReactive, reactive } from '../src/reactive'
+import { isReactive, reactive, shallowReactive } from '../src/reactive'
+
 import { effect } from '../src/effect'
 
 describe('shallowReactive', () => {
@@ -13,6 +14,14 @@ describe('shallowReactive', () => {
     expect(isReactive(props.n)).toBe(true)
   })
 
+  test('should allow shallow und normal reactive for same target', () => {
+    const target = { foo: 1 }
+    const shallowProxy = shallowReactive(target)
+    const normalProxy = reactive(target)
+
+    expect(normalProxy).not.toBe(shallowProxy)
+  })
+
   describe('collections', () => {
     test('should be reactive', () => {
       const shallowSet = shallowReactive(new Set())

diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
@@ -5,7 +5,9 @@ import {
   ReactiveFlags,
   Target,
   readonlyMap,
-  reactiveMap
+  reactiveMap,
+  shallowReactiveMap,
+  shallowReadonlyMap
 } from './reactive'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
 import {
@@ -80,7 +82,15 @@ function createGetter(isReadonly = false, shallow = false) {
       return isReadonly
     } else if (
       key === ReactiveFlags.RAW &&
-      receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)
+      receiver ===
+        (isReadonly
+          ? shallow
+            ? shallowReadonlyMap
+            : readonlyMap
+          : shallow
+            ? shallowReactiveMap
+            : reactiveMap
+        ).get(target)
     ) {
       return target
     }

diff --git a/packages/reactivity/src/reactive.ts b/packages/reactivity/src/reactive.ts
@@ -28,7 +28,9 @@ export interface Target {
 }
 
 export const reactiveMap = new WeakMap<Target, any>()
+export const shallowReactiveMap = new WeakMap<Target, any>()
 export const readonlyMap = new WeakMap<Target, any>()
+export const shallowReadonlyMap = new WeakMap<Target, any>()
 
 const enum TargetType {
   INVALID = 0,
@@ -92,7 +94,8 @@ export function reactive(target: object) {
     target,
     false,
     mutableHandlers,
-    mutableCollectionHandlers
+    mutableCollectionHandlers,
+    reactiveMap
   )
 }
 
@@ -106,7 +109,8 @@ export function shallowReactive<T extends object>(target: T): T {
     target,
     false,
     shallowReactiveHandlers,
-    shallowCollectionHandlers
+    shallowCollectionHandlers,
+    shallowReactiveMap
   )
 }
 
@@ -143,7 +147,8 @@ export function readonly<T extends object>(
     target,
     true,
     readonlyHandlers,
-    readonlyCollectionHandlers
+    readonlyCollectionHandlers,
+    readonlyMap
   )
 }
 
@@ -160,15 +165,17 @@ export function shallowReadonly<T extends object>(
     target,
     true,
     shallowReadonlyHandlers,
-    shallowReadonlyCollectionHandlers
+    shallowReadonlyCollectionHandlers,
+    shallowReadonlyMap
   )
 }
 
 function createReactiveObject(
   target: Target,
   isReadonly: boolean,
   baseHandlers: ProxyHandler<any>,
-  collectionHandlers: ProxyHandler<any>
+  collectionHandlers: ProxyHandler<any>,
+  proxyMap: WeakMap<Target, any>
 ) {
   if (!isObject(target)) {
     if (__DEV__) {
@@ -185,7 +192,6 @@ function createReactiveObject(
     return target
   }
   // target already has corresponding Proxy
-  const proxyMap = isReadonly ? readonlyMap : reactiveMap
   const existingProxy = proxyMap.get(target)
   if (existingProxy) {
     return existingProxy