computed 计算属性，

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

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({
+let firstName = ref('zhang')
-  name:'张三',
+let listName =ref('san')
-  age:18,
+
+// 计算属性有缓存
+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>
+  <main class="person">
-    <h1>姓名：{{name}}</h1>
+    姓：<input type="text" v-model:="firstName">
-    <h1>年龄：{{age}}</h1>
+    名：<input type="text" v-model:="listName">
-    <h1>toRef取出的年龄：{{x}}</h1>
-    <button @click="changeName">修改名字</button>
-    <button @click="changeAge">年龄+1</button>
   </main>
+  <h1>姓名：{{myName}}</h1>
+  <!--<button></button>-->
 </template>
 
 <style scoped>
 button {
   margin: 0 1rem;
 }
+.person {
+  font-size: 2rem;
+  line-height: 2rem;
+  input{
+    height: 2rem;
+
+  }
+}
 </style>