From 366d9109999c17f66603143c87a3200b03553edf 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:06:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=20toRef=20=E4=B8=80=E6=AC=A1?=
 =?UTF-8?q?=E5=8F=AA=E8=83=BD=E5=8F=96=E4=B8=80=E6=AC=A1=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml       | 18 +++++++++++++-----
 src/components/Person.vue |  6 +++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 95df4b0..71db772 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,9 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="defineProps，实现简单的父传子">
+    <list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="使用 toRefs 让数据变为响应式的">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -59,7 +58,7 @@
       <option name="presentableId" value="Default" />
       <updated>1745919613888</updated>
       <workItem from="1745919615396" duration="326000" />
-      <workItem from="1746189663982" duration="1161000" />
+      <workItem from="1746189663982" duration="1506000" />
     </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" />
@@ -125,7 +124,15 @@
       <option name="project" value="LOCAL" />
       <updated>1746189895108</updated>
     </task>
-    <option name="localTasksCounter" value="9" />
+    <task id="LOCAL-00009" summary="使用 toRefs 让数据变为响应式的">
+      <option name="closed" value="true" />
+      <created>1746190968763</created>
+      <option name="number" value="00009" />
+      <option name="presentableId" value="LOCAL-00009" />
+      <option name="project" value="LOCAL" />
+      <updated>1746190968763</updated>
+    </task>
+    <option name="localTasksCounter" value="10" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -152,6 +159,7 @@
     <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
     <MESSAGE value="ref、修改对象传入更新数据问题" />
     <MESSAGE value="defineProps，实现简单的父传子" />
-    <option name="LAST_COMMIT_MESSAGE" value="defineProps，实现简单的父传子" />
+    <MESSAGE value="使用 toRefs 让数据变为响应式的" />
+    <option name="LAST_COMMIT_MESSAGE" value="使用 toRefs 让数据变为响应式的" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/Person.vue b/src/components/Person.vue
index 755c569..5dd4898 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {reactive, toRefs} from "vue";
+import {reactive, toRef, toRefs} from "vue";
 
 let person = reactive({
   name:'张三',
@@ -8,6 +8,9 @@ let person = reactive({
 
 let {name,age} = toRefs(person)
 
+// toRef 使用，一次智能取一个
+let x = toRef(person,'age',)
+
 function changeName(){
   //person.name = person.name + '~'
   person.name += '~'
@@ -22,6 +25,7 @@ function changeAge(){
   <main>
     <h1>姓名：{{name}}</h1>
     <h1>年龄：{{age}}</h1>
+    <h1>toRef取出的年龄：{{x}}</h1>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">年龄+1</button>
   </main>