From 73539a977a42ae16f0e34722db54522027470126 Mon Sep 17 00:00:00 2001
From: xiaxzp <1078799746@qq.com>
Date: Wed, 21 Sep 2022 16:19:30 +0800
Subject: [PATCH] fix: use readonly on frozen object causeing error

problem:
[Vue warn]: Error in setup: "TypeError: Cannot define property __v_rawToReadonly, object is not extensible"
TypeError: Cannot define property __v_rawToReadonly, object is not extensible

demo:
https://codesandbox.io/s/vue-2-7-v-rawtoreadonly-demo-10ix10?file=/src/App.vue

reason:
Readonly function sets new property on object recursively. This may cause this error when meeting frozen variables. Ofcourse this error can also happen when using readonly directly on frozen objects.

solvement:
This fix can simply solve the issue by checking the extensibility of target, and keep the temp proxy at the same time, but leaving existing proxy cache useless.
The main reason is the "isReadonly" judgement, but it's difficult to change this basic feature, and the frozen target may still contain not frozen things? As this case may happen rarely, this fix is enough now and willing for future improvements.
---
 src/v3/reactivity/readonly.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/v3/reactivity/readonly.ts b/src/v3/reactivity/readonly.ts
index 933f910b69f..f3c0b3a9331 100644
--- a/src/v3/reactivity/readonly.ts
+++ b/src/v3/reactivity/readonly.ts
@@ -70,7 +70,11 @@ function createReadonly(target: any, shallow: boolean) {
   }
 
   const proxy = Object.create(Object.getPrototypeOf(target))
-  def(target, existingFlag, proxy)
+  
+  // skip frozen object
+  if (Object.isExtensible(target)) {
+    def(target, existingFlag, proxy)
+  }
 
   def(proxy, ReactiveFlags.IS_READONLY, true)
   def(proxy, ReactiveFlags.RAW, target)