fix(reactivity): readonly() compat with classes

fix #12574
vuejs · Jun 23, 2022 · 44ab1cd · 44ab1cd
1 parent 530b56a
commit 44ab1cd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/v3/reactivity/readonly.ts b/src/v3/reactivity/readonly.ts
@@ -69,7 +69,7 @@ function createReadonly(target: any, shallow: boolean) {
     return existingProxy
   }
 
-  const proxy = {}
+  const proxy = Object.create(Object.getPrototypeOf(target))
   def(target, existingFlag, proxy)
 
   def(proxy, ReactiveFlags.IS_READONLY, true)

diff --git a/test/unit/features/v3/reactivity/readonly.spec.ts b/test/unit/features/v3/reactivity/readonly.spec.ts
@@ -499,4 +499,25 @@ describe('reactivity/readonly', () => {
     expect(obj.ror).toBe(true)
     expect(toRaw(obj).ror).not.toBe(ror) // ref successfully replaced
   })
+
+  test('compatiblity with classes', () => {
+    const spy = vi.fn()
+    class Foo {
+      x = 1
+      log() {
+        spy(this.x)
+      }
+      change() {
+        this.x++
+      }
+    }
+    const foo = new Foo()
+    const readonlyFoo = readonly(foo)
+    readonlyFoo.log()
+    expect(spy).toHaveBeenCalledWith(1)
+
+    readonlyFoo.change()
+    expect(readonlyFoo.x).toBe(1)
+    expect(`et operation on key "x" failed`).toHaveBeenWarned()
+  })
 })