From 665f175129c78ebcb9ffb94da308731bdd799d09 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: Fri, 2 May 2025 21:25:32 +0800
Subject: [PATCH] =?UTF-8?q?computed=20=E8=AE=A1=E7=AE=97=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml       | 17 +++++++++++----
 src/components/Person.vue | 44 +++++++++++++++++++--------------------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 71db772..b957521 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="使用 toRefs 让数据变为响应式的">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 toRef 一次只能取一次数据">
       <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>
@@ -58,7 +58,7 @@
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
       <workItem from="1745919615396" duration="326000" />
-      <workItem from="1746189663982" duration="1506000" />
+      <workItem from="1746189663982" duration="2611000" />
     </task>
     <task id="LOCAL-00001" summary="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">
       <option name="closed" value="true" />
@@ -132,7 +132,15 @@
       <option name="project" value="LOCAL" />
       <updated>1746190968763</updated>
     </task>
-    <option name="localTasksCounter" value="10" />
+    <task id="LOCAL-00010" summary="使用 toRef 一次只能取一次数据">
+      <option name="closed" value="true" />
+      <created>1746191210625</created>
+      <option name="number" value="00010" />
+      <option name="presentableId" value="LOCAL-00010" />
+      <option name="project" value="LOCAL" />
+      <updated>1746191210625</updated>
+    </task>
+    <option name="localTasksCounter" value="11" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -160,6 +168,7 @@
     <MESSAGE value="ref、修改对象传入更新数据问题" />
     <MESSAGE value="defineProps，实现简单的父传子" />
     <MESSAGE value="使用 toRefs 让数据变为响应式的" />
-    <option name="LAST_COMMIT_MESSAGE" value="使用 toRefs 让数据变为响应式的" />
+    <MESSAGE value="使用 toRef 一次只能取一次数据" />
+    <option name="LAST_COMMIT_MESSAGE" value="使用 toRef 一次只能取一次数据" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 5dd4898..930e5ec 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,38 +1,36 @@
 <script setup lang="ts">
-import {reactive, toRef, toRefs} from "vue";
+import {ref,computed} from "vue";
 
-let person = reactive({
-  name:'张三',
-  age:18,
+let firstName = ref('zhang')
+let listName =ref('san')
+
+// 计算属性有缓存
+let myName = computed(()=>{
+  //return firstName.value + listName.value
+  return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + listName.value
 })
 
-let {name,age} = toRefs(person)
-
-// toRef 使用，一次智能取一个
-let x = toRef(person,'age',)
-
-function changeName(){
-  //person.name = person.name + '~'
-  person.name += '~'
-}
-
-function changeAge(){
-  person.age +=1
-}
 </script>
 
 <template>
-  <main>
-    <h1>姓名：{{name}}</h1>
-    <h1>年龄：{{age}}</h1>
-    <h1>toRef取出的年龄：{{x}}</h1>
-    <button @click="changeName">修改名字</button>
-    <button @click="changeAge">年龄+1</button>
+  <main class="person">
+    姓：<input type="text" v-model:="firstName">
+    名：<input type="text" v-model:="listName">
   </main>
+  <h1>姓名：{{myName}}</h1>
+  <!--<button></button>-->
 </template>
 
 <style scoped>
 button {
   margin: 0 1rem;
 }
+.person {
+  font-size: 2rem;
+  line-height: 2rem;
+  input{
+    height: 2rem;
+
+  }
+}
 </style>