Merge 38f995763a into 56be3dd4db

packages/reactivity/__tests__/reactive.spec.ts

@@ -207,6 +207,13 @@ describe('reactivity/reactive', () => {
     expect(raw).toBe(original)
   })
 
+  test('toRaw on collection types using reactive as prototype', () => {
+    const originalCollection = reactive(new Map())
+    const collection = Object.create(originalCollection)
+    const rawCollection = toRaw(collection)
+    expect(rawCollection).toBe(collection)
+  })
+
   test('should not unwrap Ref<T>', () => {
     const observedNumberRef = reactive(ref(1))
     const observedObjectRef = reactive(ref({ foo: 1 }))

packages/reactivity/src/baseHandlers.ts

@@ -46,6 +46,30 @@ function hasOwnProperty(this: object, key: unknown) {
   return obj.hasOwnProperty(key as string)
 }
 
+export function getRawValue(
+  receiver: object,
+  isReadonly: boolean,
+  isShallow: boolean,
+  target: Target,
+): Target | undefined {
+  if (
+    receiver ===
+      (isReadonly
+        ? isShallow
+          ? shallowReadonlyMap
+          : readonlyMap
+        : isShallow
+          ? shallowReactiveMap
+          : reactiveMap
+      ).get(target) ||
+    // receiver is not the reactive proxy, but has the same prototype
+    // this means the receiver is a user proxy of the reactive proxy
+    Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)
+  ) {
+    return target
+  }
+}
+
 class BaseReactiveHandler implements ProxyHandler<Target> {
   constructor(
     protected readonly _isReadonly = false,
@@ -64,24 +88,7 @@ class BaseReactiveHandler implements ProxyHandler<Target> {
     } else if (key === ReactiveFlags.IS_SHALLOW) {
       return isShallow
     } else if (key === ReactiveFlags.RAW) {
-      if (
+      return getRawValue(receiver, isReadonly, isShallow, target)
-        receiver ===
-          (isReadonly
-            ? isShallow
-              ? shallowReadonlyMap
-              : readonlyMap
-            : isShallow
-              ? shallowReactiveMap
-              : reactiveMap
-          ).get(target) ||
-        // receiver is not the reactive proxy, but has the same prototype
-        // this means the receiver is a user proxy of the reactive proxy
-        Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)
-      ) {
-        return target
-      }
-      // early return undefined
-      return
     }
 
     const targetIsArray = isArray(target)

packages/reactivity/src/collectionHandlers.ts

@@ -17,6 +17,7 @@ import {
   toRawType,
 } from '@vue/shared'
 import { warn } from './warning'
+import { getRawValue } from './baseHandlers'
 
 type CollectionTypes = IterableCollections | WeakCollections
 
@@ -273,7 +274,7 @@ function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
     } else if (key === ReactiveFlags.IS_READONLY) {
       return isReadonly
     } else if (key === ReactiveFlags.RAW) {
-      return target
+      return getRawValue(receiver, isReadonly, shallow, target)
     }
 
     return Reflect.get(