作用

创建一个ref对象，其value值指向另一个对象中的某个属性。

语法

const name=toRef(person,‘name’)

应用

要将响应式对象中的某个属性单独提供给外部使用时
#扩展
toRefs与toRef功能一直，但可以批量创建多个ref对象,语法：toRefs(person)

测试代码：

<template><h4>{{person}}</h4><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>薪资：{{job.j1.salary}}K</h2><button @click="name+='~'">修改姓名</button><button @click="age++">增长年龄</button><button @click="job.j1.salary++">涨薪</button>
</template><script>import {ref,reactive,toRef,toRefs} from 'vue'export default {name: 'Demo',setup(){//数据let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})// const name1 = person.name// console.log('%%%',name1)// const name2 = toRef(person,'name')// console.log('####',name2)const x = toRefs(person)console.log('******',x)//返回一个对象（常用）return {person,// name:toRef(person,'name'),// age:toRef(person,'age'),// salary:toRef(person.job.j1,'salary'),...toRefs(person)}}}
</script>