我们在使用vue3当中的composition api时，我们将一个数据变成可响应式的数据时，我们可能经常用的ref这个api，其实还存在一个toRef，这个api也可以将一个数据变成可响应式的。但是两者也存在着一些不同之处。

ref的用法：

const nameRef = ref('lisa')

toRef的用法：

const obj = { name: 'lisa' }
const nameRef = toRef(obj, 'name')

你会发现toRef是需要传入两个参数，一个是目标对象，一个对象当中的属性名，它的返回结果就是属性名的可响应式数据。

你是否会觉得toRef的使用比ref麻烦许多，并且两者使用的目的是一致的，这个toRef存在就不是很有必要了。

但是，ref的原理是将穿进去的数据进行了拷贝，那就是说如果nameRef.value发生了变化，穿进去的数据是不会发生变化的。

而toRef就不是进行了拷贝操作，而是对其进行引用了，那么当你对nameRef.value的值发生改变的时候，穿进去的数据也会相应的随之发生变化。

而两者还有一个不同之处，那就是toRef的值发生变化，但是UI界面是不会进行重新渲染，反之，使用ref的值发生了变化，UI界面是会进行重新渲染的。

综上所述：
1、ref返回的值发生了变化，原始值不会变化；toRef返回的值发生了变化，原始值会变化。
2、ref返回的值发生了变化，UI界面会进行重新渲染；toRef返回的值发生了变化，UI界面不会进行重新渲染。