介绍
它可用于为响应式对象上的 property 创建 ref，这样创建的 ref 与其源 property 保持同步，当改变源 property 时，将更新 ref ，反之亦然。
这段话有些晦涩难懂，其实用大白话说，就是当你使用 reactive 创建响应式对象后，你可以通过 toRef 引用这个响应式对象的某一个属性，无论你修改原响应式数据还是修改 toRef 引用的数据，它们都始终保持响应式。
示例代码
还不理解没关系，我们来写一个小例子看一下。
<template>
<h2>原响应式对象：{{ obj.name }}</h2>
<h2>通过toRef引用过来的：{{ uname }}</h2>
<hr>
<h2>obj：{{ obj.name }}</h2>
<h2>uname：{{ uname }}</h2>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
setup() {
// reactive响应式对象
const obj = reactive({
name: '刘华强',
age: 34
})
// 引用其name属性并保持响应(引用)
const uname = toRef(obj, 'name')
// 修改原响应式对象
setTimeout(() => {
obj.name = '瓜摊老板'
}, 3000)
// 修改通过toRef引用的
setTimeout(() => {
uname.value = '啊...撒日朗'
}, 6000)
// return
return { obj, uname }
}
}
</script>
咱们先来看两遍，可以看到，定时器 3 秒后改变原响应式对象 obj 的 name 属性时，其通过 toRef 引过来的 uname 也发生了改变。
相反，定时器 6 秒后改变其通过 toRef 引过来的 uname 时，原响应式对象也同样发生了变化，这足以证明 它们依旧还都是响应式的。
使用场景
这玩意什么时候用呢，就是当你要将响应式对象中的某个属性，单独给外部使用时候。
比如，你有一个这样的响应式对象，在页面上已经展示了数据。
const obj = reactive({
name: '总收益',
money: 4999
})
哎过了两天，老板说想把这个总收益展示到其他地方，此刻的你需要将这个总收益 money 字段单独拿出来，放到老板所要展示的地方，对应的代码就是这样的。
const obj = reactive({
name: '总收益',
money: 4999
})
// 单独拿出来(在需要的地方使用)
const Money = toRef(obj, 'money')
你看你无需考虑这份总收益 money 数据更新问题，因为一旦 obj 响应式对象更新了，咱们所单独拿出来的也会自动更新，同时呢，当你改变单独拿出来的这份后，obj 响应式对象也会同时更新。
不是很好理解，况且这玩意真实项目开发使用场景也不少。
SEO
Vue3官方文档，vue3.js toRef 官方文档教程，vue3toRef，一文搞懂Vue3中toRef和toRefs函数的使用，vue3-(toRef,toRefs,toRaw)，Vue3如何理解ref, toRef和toRefs响应式数据方法，前端- toRaf和ref的区别，深入理解 Vue3 Reactivity API ，Vue3 - toRef() 使用教程。
