From 3774ab0b280044daf70ec3f42e972b5a137fcec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E4=B8=8A=E8=B4=B5=E7=8C=AA?= <290425385@qq.com>
Date: Tue, 29 Apr 2025 21:51:25 +0800
Subject: [PATCH] =?UTF-8?q?ref=E3=80=81=E4=BF=AE=E6=94=B9=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1=E4=BC=A0=E5=85=A5=E6=9B=B4=E6=96=B0=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml       | 15 ++++++++++++---
 src/components/Person.vue | 15 ++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index af89bf6..01461be 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,7 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="reaction 对象的使用 v-for">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
     </list>
@@ -99,7 +99,15 @@
       <option name="project" value="LOCAL" />
       <updated>1745932029058</updated>
     </task>
-    <option name="localTasksCounter" value="6" />
+    <task id="LOCAL-00006" summary="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题">
+      <option name="closed" value="true" />
+      <created>1745934177134</created>
+      <option name="number" value="00006" />
+      <option name="presentableId" value="LOCAL-00006" />
+      <option name="project" value="LOCAL" />
+      <updated>1745934177134</updated>
+    </task>
+    <option name="localTasksCounter" value="7" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -112,6 +120,7 @@
     <MESSAGE value="ref 的简单实用" />
     <MESSAGE value="ref 变量 和 reaction 对象的使用" />
     <MESSAGE value="reaction 对象的使用 v-for" />
-    <option name="LAST_COMMIT_MESSAGE" value="reaction 对象的使用 v-for" />
+    <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
+    <option name="LAST_COMMIT_MESSAGE" value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 688fc1f..b2eb9b5 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import {reactive, ref} from "vue";
 
-let car = reactive(
+//let car = reactive(
+//    {brand: '宝马',price:100}
+//)
+ let car = ref(
     {brand: '宝马',price:100}
 )
 
 function changeBrand(){
-  car.brand = '三菱'
+  car.value.brand = '三菱'
 }
 function changePrice(){
-  car.price += 10
+  car.value.price += 10
 }
 function changeCar(){
   //car = {brand: '五菱宏观',price:5} // 页面不更新
   //car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示
-  Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
+  //Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
+
+  car.value = reactive({brand: '五菱宏观',price:5}) // 改成ref的话可以
 
   //用法等同于 ⬇️
   //const target = { a: 1 };
@@ -28,7 +33,7 @@ function changeCar(){
 
 <template>
   <main>
-    <h1>汽车：{{car.brand}}===价格：{{car.price}}</h1>
+    <h1>汽车：{{car.brand}}===价格：{{car.price}}w</h1>
     <button @click="changeBrand">修改名字</button>
     <button @click="changePrice">价格+10</button>
     <button @click="changeCar">整体修改</button>