From 2303e5b33308d29a7508dcd94afc05e4bac1213b 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:42:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Object.assign()=20?=
 =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=AF=B9=E8=B1=A1=EF=BC=88=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=B9=B6=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=89=EF=BC=8C=E5=8C=BA=E5=88=AB=E4=BA=8Eref=E3=80=81reacti?=
 =?UTF-8?q?ve=E4=B8=8D=E5=8F=AF=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 | 46 +++++++++++++++++----------------------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d33b030..af89bf6 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="ref 变量 和 reaction 对象的使用">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="reaction 对象的使用 v-for">
       <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>
@@ -91,7 +91,15 @@
       <option name="project" value="LOCAL" />
       <updated>1745931199936</updated>
     </task>
-    <option name="localTasksCounter" value="5" />
+    <task id="LOCAL-00005" summary="reaction 对象的使用 v-for">
+      <option name="closed" value="true" />
+      <created>1745932029058</created>
+      <option name="number" value="00005" />
+      <option name="presentableId" value="LOCAL-00005" />
+      <option name="project" value="LOCAL" />
+      <updated>1745932029058</updated>
+    </task>
+    <option name="localTasksCounter" value="6" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -103,6 +111,7 @@
     <MESSAGE value="setup 的新写法" />
     <MESSAGE value="ref 的简单实用" />
     <MESSAGE value="ref 变量 和 reaction 对象的使用" />
-    <option name="LAST_COMMIT_MESSAGE" value="ref 变量 和 reaction 对象的使用" />
+    <MESSAGE value="reaction 对象的使用 v-for" />
+    <option name="LAST_COMMIT_MESSAGE" value="reaction 对象的使用 v-for" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 11a07c1..688fc1f 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,43 +1,37 @@
 <script setup lang="ts">
 import {reactive, ref} from "vue";
 
-// 单数据
-let name = ref('张三')
-
-// 对象数据
 let car = reactive(
-    {brand: '小米 su 7', prive: 30}
+    {brand: '宝马',price:100}
 )
 
-// 游戏数据
-let geame = reactive(
-    [
-      {id: '1', name: '王者荣耀'},
-      {id: '2', name: '黑神话·悟空'},
-      {id: '3', name: '地平线5'},
-    ]
-)
-function geameFast(){
-  geame[0].name = '打wa'
+function changeBrand(){
+  car.brand = '三菱'
 }
-
-function changeName() {
-  name.value = '李四'
+function changePrice(){
+  car.price += 10
 }
+function changeCar(){
+  //car = {brand: '五菱宏观',price:5} // 页面不更新
+  //car = reactive({brand: '五菱宏观',price:5}) // 新指排了对象，页面不显示
+  Object.assign(car,{brand: '五菱宏观',price:5}) // 合并对象
 
-function changePrive() {
-//  价格修改
-  car.prive += 10
+  //用法等同于 ⬇️
+  //const target = { a: 1 };
+  //const source1 = { b: 2 };
+  //const source2 = { c: 3 };
+  //
+  //const result = Object.assign(target, source1, source2);
+  //console.log(result); // { a: 1, b: 2, c: 3 }
 }
 </script>
 
 <template>
   <main>
-    <h1>游戏列表</h1>
-    <ul>
-      <li v-for="g in geame" :key="g.id">{{g.name}}</li>
-    </ul>
-    <button @click="geameFast">修改第一个游戏明细</button>
+    <h1>汽车：{{car.brand}}===价格：{{car.price}}</h1>
+    <button @click="changeBrand">修改名字</button>
+    <button @click="changePrice">价格+10</button>
+    <button @click="changeCar">整体修改</button>
   </main>
 </template>