ref 变量 和 reaction 对象的使用

.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="setup 的新写法">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="ref 的简单实用">
       <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>
@@ -75,7 +75,15 @@
       <option name="project" value="LOCAL" />
       <updated>1745930176285</updated>
     </task>
-    <option name="localTasksCounter" value="3" />
+    <task id="LOCAL-00003" summary="ref 的简单实用">
+      <option name="closed" value="true" />
+      <created>1745930547660</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1745930547660</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -85,6 +93,7 @@
     <MESSAGE value="Vue2 &amp; Vue3 中data 与setup 数据的调用情况" />
     <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 的新写法" />
-    <option name="LAST_COMMIT_MESSAGE" value="setup 的新写法" />
+    <MESSAGE value="ref 的简单实用" />
+    <option name="LAST_COMMIT_MESSAGE" value="ref 的简单实用" />
   </component>
 </project>

src/components/Person.vue

@@ -1,27 +1,29 @@
 <script setup lang="ts">
-import {ref} from "vue";
+import {ref, reactive} from "vue";
 
-let age = ref(18);
+// 单数据
-let name = ref('张三');
+let name = ref('张三')
-const address = ref('广东广州天河...')
+
+// 对象数据
+let car = reactive(
+    { brand: '小米 su 7', prive: 30}
+)
 
 function changeName(){
   name.value = '李四'
 }
-function AgeADD(){
+function changePrive(){
-  age.value +=1
+//  价格修改
+  car.prive += 10
 }
-
-let axxxx:string = '新泻法';
 </script>
 
 <template>
   <main>
-    <h1>姓名：{{name}}</h1>
+    <h1>{{name}}买了一辆{{car.brand}},价值{{car.prive}}万</h1>
-    <h1>年龄：{{age}}</h1>
-    <h1>地址：{{address}}</h1>
     <button @click="changeName">修改名字</button>
-    <button @click="AgeADD">年龄 +1</button>
+    <button @click="changePrive">修改价格</button>
+
   </main>
 </template>