Vue 3中的toRef函数：将响应式对象的属性转换为新的响应式引用

在Vue 3中，toRef是一个函数，用于将一个响应式对象的属性转换为一个新的响应式引用。这允许您将一个嵌套的响应式对象的属性提取出来，以便它可以被单独访问并用作响应式数据。

以下是一个示例：

import { reactive, toRef } from 'vue'

const user = reactive({
  name: 'John',
  age: 30
})

const nameRef = toRef(user, 'name')

console.log(nameRef.value) // John

nameRef.value = 'Mike'

console.log(user.name) // Mike

在上面的示例中，我们首先创建了一个响应式对象user，其中包含name和age属性。然后，我们使用toRef函数将name属性提取为一个新的响应式引用nameRef。这允许我们通过nameRef.value访问该属性，并将其更改为'Mike'。最后，我们验证user.name是否已更新为'Mike'。

需要注意的是，toRef函数返回一个新的响应式引用，并且它只能应用于响应式对象的属性。如果您尝试将toRef应用于非响应式对象或非响应式属性，则会引发错误。