Vue3里面的toRef和toRefs怎么用，和使用场景是啥

toRef和toRefs是Vue3中新增的API，主要用于将响应式对象中的某个属性变成一个单独的响应式引用，以及将整个响应式对象转化为普通对象，并将其属性变成响应式引用。

使用toRef，我们可以创建一个单独的响应式引用，并保持引用与原始对象属性的响应式关联，这样当原始对象属性的值发生变化时，引用的值也会相应地更新。

使用toRefs，我们可以将一个响应式对象转换为普通对象，并将所有属性都变成响应式引用，这样我们就可以在一个非响应式的上下文（比如组件的template）中使用这些属性，而不需要通过setup()暴露整个响应式对象。

下面是它们的具体用法：

toRef

import { reactive, toRef } from 'vue'

const state = reactive({
  name: '张三',
  age: 20
})

const nameRef = toRef(state, 'name')

console.log(nameRef.value) // '张三'

state.name = '李四'
console.log(nameRef.value) // '李四'

在上面的例子中，我们使用toRef创建了一个名为nameRef的响应式引用，它是state.name的引用。当state.name的值发生变化时，nameRef.value的值也会相应地更新。

toRefs

import { reactive, toRefs } from 'vue'

const state = reactive({
  name: '张三',
  age: 20
})

const object = toRefs(state)

console.log(object.value.name) // '张三'
console.log(object.value.age) // 20

在上面的例子中，我们使用toRefs将state对象转化为普通对象并将其属性变成响应式引用。这个操作返回的是一个新对象，我们可以通过value属性访问它的属性。

总的来说，toRef适合将响应式对象中的某个属性变成一个单独的响应式引用，比如将computed属性的依赖转化为响应式引用；而toRefs适合将一个响应式对象转换为普通对象以在非响应式的上下文中使用。