ref、修改对象传入更新数据问题

.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>

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>