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对象就可以了。