toRef和toRefs可以理解为给一个响应式对象的一个或多个属性创建ref对象。ref的值会和响应式对象的值保持同步。
区别就是toRef是创建一个，toRefs是一下创建多个。
响应式对象可以是我们用reactive创建的对象，或者是setup函数中参数props。
toRef
我们还是通过例子来学习，
首先我们创建一个响应式的对象，
const data = reactive({
name: 'linge',
age: 18,
})
现在我们打印一下age：
console.log(data.age)
输出结果是：
它是一个单纯的数字类型
使用toRef函数，我们可以根据age这个属性，创建一个ref对象：
const ageRef = toRef(data, 'age')
console.log(ageRef)
这时候，我们打印的就是一个ref对象了
使用.value获取到age的值：
console.log(ageRef.value)
同时，不管是修改原来响应式对象，还是修改ref对象的值，它们都会同步修改：
ageRef.value = 19
console.log(data.age) // 输出19
data.age = 20
console.log(ageRef.value) // 输出20
那么把一个普通的属性转化为ref对象有什么用呢？
我们在使用复合函数，useFunc()给这样的函数传参数时，不要使用简单的类型，要使用ref对象
useFunc(ageRef)
官网没说为什么这么做，我认为是因为函数参数值传递的特性。有兴趣的小伙伴可以搜一下。
toRefs
跟toRef最大的区别就是toRefs创建的是一个对象，里面每个值都是ref对象，也就是一下子创建对个ref对象。
打印对比一下，就特别明显了，我们先来打印下一原来的响应式对象：
const data = reactive({
name: 'linge',
age: 18,
})
console.log(data)
打印的是一个Proxy对象
里面有两个属性，name和age
然后我们使用toRefs创建一个对象
const dataRefs = toRefs(data)
console.log(dataRefs)
结果：
我们看到dataRefs其实是一个普通对象，它里面有两个属性name和age，但是这两个属性都是ref对象。
更上面一样，它们值改变的话都是保持同步，我就不举例子了。
那toRefs有什么用？
如果我们直接解构响应式对象，那么解构出来的变量没有响应性
const { name, age } = data
console.log(name, age)
打印出来的结果name只是普通的字符串，age只是普通的数字类型，所以这两个变量就没有响应性了，
如果我们希望保持响应性，那就先调用toRefs，再解构：
const { name, age } = toRefs(data)
console.log(name, age)
这样，name和age是两个ref对象：
就会保持响应性了。
这又有什么用？
比如我的data对象上面有好多属性，都要显示在模板中：
<template>
<div>
我的名字是：{{ data.name }}<br />
我的年龄是：{{ data.age }}<br />
我的性别是：{{ data.gender }}<br />
我的身高是：{{ data.height }}<br />
我的智商是：{{ data.IQ }}<br />
</div>
</template>
<script setup>
import { reactive } from 'vue'
const data = reactive({
name: 'linge',
age: 18,
gender: 'male',
height: 180,
IQ: 180,
})
</script>
显示结果是：
我们可以看到，模板里写了好多data.，因为我们的数据都在data对象下面，这时候就可以用toRefs，然后给它解构了：
<template>
<div>
我的名字是：{{ name }}<br />
我的年龄是：{{ age }}<br />
我的性别是：{{ gender }}<br />
我的身高是：{{ height }}<br />
我的智商是：{{ IQ }}<br />
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const data = reactive({
name: 'linge',
age: 18,
gender: 'male',
height: 180,
IQ: 180,
})
const { name, age, gender, height, IQ } = toRefs(data) // 新增
</script>
这样模板就简洁多了
这节课就到这里了，记住toRef和toRefs的作用就是创建ref对象就可以了。
