ahxin/Vue3-learning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

使用 toRef 一次只能取一次数据

Browse Source
This commit is contained in:
云上贵猪 2025-05-02 21:06:49 +08:00
parent cf9a4c7f0d
commit 366d910999
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.idea/workspace.xml generated
View File

@ -4,9 +4,8 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <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$/.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" /> <change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@ -59,7 +58,7 @@
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1745919613888</updated> <updated>1745919613888</updated>
<workItem from="1745919615396" duration="326000" /> <workItem from="1745919615396" duration="326000" />
<workItem from="1746189663982" duration="1161000" /> <workItem from="1746189663982" duration="1506000" />
</task> </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"> <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" /> <option name="closed" value="true" />
@ -125,7 +124,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1746189895108</updated> <updated>1746189895108</updated>
</task> </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 /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -152,6 +159,7 @@
<MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" /> <MESSAGE value="使用 Object.assign() 合并对象（修改属性并更新页面），区别于ref、reactive不可更新数据问题" />
<MESSAGE value="ref、修改对象传入更新数据问题" /> <MESSAGE value="ref、修改对象传入更新数据问题" />
<MESSAGE value="defineProps，实现简单的父传子" /> <MESSAGE value="defineProps，实现简单的父传子" />
<option name="LAST_COMMIT_MESSAGE" value="defineProps，实现简单的父传子" /> <MESSAGE value="使用 toRefs 让数据变为响应式的" />
<option name="LAST_COMMIT_MESSAGE" value="使用 toRefs 让数据变为响应式的" />
</component> </component>
</project> </project>

6
src/components/Person.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import {reactive, toRefs} from "vue"; import {reactive, toRef, toRefs} from "vue";
let person = reactive({ let person = reactive({
name:'张三', name:'张三',
@ -8,6 +8,9 @@ let person = reactive({
let {name,age} = toRefs(person) let {name,age} = toRefs(person)
// toRef 使用，一次智能取一个
let x = toRef(person,'age',)
function changeName(){ function changeName(){
//person.name = person.name + '~' //person.name = person.name + '~'
person.name += '~' person.name += '~'
@ -22,6 +25,7 @@ function changeAge(){
<main> <main>
<h1>姓名：{{name}}</h1> <h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1> <h1>年龄：{{age}}</h1>
<h1>toRef取出的年龄：{{x}}</h1>
<button @click="changeName">修改名字</button> <button @click="changeName">修改名字</button>
<button @click="changeAge">年龄+1</button> <button @click="changeAge">年龄+1</button>
</main> </main>