介绍

它可用于为响应式对象上的 property 创建 ref，这样创建的 ref 与其源 property 保持同步，当改变源 property 时，将更新 ref ，反之亦然。

这段话有些晦涩难懂，其实用大白话说，就是当你使用 reactive 创建响应式对象后，你可以通过 toRef 引用这个响应式对象的某一个属性，无论你修改原响应式数据还是修改 toRef 引用的数据，它们都始终保持响应式。

示例代码

还不理解没关系，我们来写一个小例子看一下。

咱们先来看两遍，可以看到，定时器 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() 使用教程。