作用：创建一个ref对象，其value值指向另外一个对象中的某个属性。这样在模板中就可以直接使用属性名而不用麻烦的再加对象名前缀了。
语法：
const name = toRef(person,'name')应用：要将响应式对象中的某个属性单独提供给外部使用时。
扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，需要注意的是它只会解析对象的第一层属性，语法直接传入对象 toRefs(person)
示例：
toRef
<template>
<span>{{person}}</span>
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<h2>薪资：{{salary}}K</h2>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增涨年龄</button>
<button @click="salary++">涨薪</button>
</template>
<script>
import {reactive,toRef,toRefs} from 'vue'
export default{
name:'App',
setup(){
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
person, //如果只是像之前一样定义reactive后 模板中需要使用属性都要加上对象名（person.name）
name:toRef(person,'name'),
age:toRef(person,'age'),
salary:toRef(person.job.j1,'salary')
}
}
}
</script>在线浏览效果：
toRefs
<script>
import {reactive,toRef,toRefs} from 'vue'
export default{
name:'App',
setup(){
let person = reactive({
name:'张三',
age:18,
job:{
j1:{
salary:20
}
}
})
return {
person,
...toRefs(person)
}
}
}
</script>浏览器效果图：
到此这篇关于Vue3中toRef与toRefs的区别的文章就介绍到这了,更多相关toRef与toRefs内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
