当前位置：首页 > news >正文

Vue3【十一】08使用toRefs和toRef

news 2025/7/28 2:29:40

08使用toRefs和toRef

toRefs()函数将person对象中的name和age属性转换为响应式引用，并返回一个对象，对象中的name和age属性都是响应式引用，具有响应式功能。
toRef()函数将person对象中的name属性转换为响应式引用，并返回一个响应式引用，具有响应式功能。

案例截图

使用oRefs和toRef

目录结构

在这里插入图片描述

代码

Person.vue


<template><div class="person"><h1>我是 Person 组件</h1><h2>名字:{{ person.name }}</h2><h2>数量:{{ person.age }} </h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showAdd">查看信息</button></div>
</template><script lang="ts" setup>
import { c } from 'vite/dist/node/types.d-aGj9QkWt';
import { reactive,ref,toRef,toRefs } from 'vue'
// 数据
let person = reactive({name: '太上老君',age: 18000,add: '兜率宫。兜率宫位于江西省鹰潭市的龙虎山，是道教的重要圣地之一。它被认为是太上老君的道场，位于离恨天之上，是道教神话中兜率天宫的一部分。兜率宫原址位于龙虎山天门山，有着悠久的历史和文化背景。',
})// let {name,age} = person //直接解构的变量name和age没有响应式功能，只是单纯的变量 
// console.log(name,age)// let {name,age} = toRefs(person)   // toRefs()函数将person对象中的name和age属性转换为响应式引用，并返回一个对象，对象中的name和age属性都是响应式引用，具有响应式功能。
// console.log(name,age)let name = toRef(person,'name') // toRef()函数将person对象中的name属性转换为响应式引用，并返回一个响应式引用，具有响应式功能。
console.log(name)
console.log(person)// 方法
function showAdd() {alert(person.add)
}
function changeName() {// person.name = person.name == "太上老君" ? '孙悟空' : '太上老君'name.value = name.value == "太上老君" ? '孙悟空' : '太上老君'console.log(name.value)
}
function changeAge() {person.age += 1console.log(person.age)
}
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>