From 93379692b2319b8565d5610a71d1c4e5b6e7d790 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:07:08 +0800
Subject: [PATCH] =?UTF-8?q?reaction=20=E5=AF=B9=E8=B1=A1=E7=9A=84=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20v-for?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 3ec9b17..d33b030 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 的简单实用">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref 变量 和 reaction 对象的使用">
       <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>
@@ -83,7 +83,15 @@
       <option name="project" value="LOCAL" />
       <updated>1745930547660</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="ref 变量 和 reaction 对象的使用">
+      <option name="closed" value="true" />
+      <created>1745931199936</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1745931199936</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -94,6 +102,7 @@
     <MESSAGE value="Merge remote-tracking branch 'vue3-学习仓库/dev' into dev&#10;&#10;# Conflicts:&#10;#&#9;.idea/workspace.xml&#10;#&#9;README.md&#10;#&#9;src/components/Person.vue" />
     <MESSAGE value="setup 的新写法" />
     <MESSAGE value="ref 的简单实用" />
-    <option name="LAST_COMMIT_MESSAGE" value="ref 的简单实用" />
+    <MESSAGE value="ref 变量 和 reaction 对象的使用" />
+    <option name="LAST_COMMIT_MESSAGE" value="ref 变量 和 reaction 对象的使用" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 3674f6b..11a07c1 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,18 +1,31 @@
 <script setup lang="ts">
-import {ref, reactive} from "vue";
+import {reactive, ref} from "vue";
 
 // 单数据
 let name = ref('张三')
 
 // 对象数据
 let car = reactive(
-    { brand: '小米 su 7', prive: 30}
+    {brand: '小米 su 7', prive: 30}
 )
 
-function changeName(){
+// 游戏数据
+let geame = reactive(
+    [
+      {id: '1', name: '王者荣耀'},
+      {id: '2', name: '黑神话·悟空'},
+      {id: '3', name: '地平线5'},
+    ]
+)
+function geameFast(){
+  geame[0].name = '打wa'
+}
+
+function changeName() {
   name.value = '李四'
 }
-function changePrive(){
+
+function changePrive() {
 //  价格修改
   car.prive += 10
 }
@@ -20,10 +33,11 @@ function changePrive(){
 
 <template>
   <main>
-    <h1>{{name}}买了一辆{{car.brand}},价值{{car.prive}}万</h1>
-    <button @click="changeName">修改名字</button>
-    <button @click="changePrive">修改价格</button>
-
+    <h1>游戏列表</h1>
+    <ul>
+      <li v-for="g in geame" :key="g.id">{{g.name}}</li>
+    </ul>
+    <button @click="geameFast">修改第一个游戏明细</button>
   </main>
 </template>