9、 Vue3中ref、toRef、toRefs三个的区别

在Vue3中，ref、toRef和toRefs都是用来创建响应式数据的方法，它们的区别如下：

1. ref：ref用于将一个普通的数据变成响应式数据。它返回一个对象，该对象有一个value属性，该属性包含了我们传入的初始值。可以通过改变value的值来实现响应式更新。

import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++ // 触发响应式更新
console.log(count.value) // 1

2. toRef：toRef用于创建一个ref对象的引用，它接收两个参数：源对象和属性名。它返回一个新的ref对象，该对象与源对象的属性保持同步。当源对象中的属性值变化时，toRef返回的ref对象也会随之更新。

import { ref, toRef } from 'vue'
const obj = {
  name: 'Tom',
  age: 18
}
const ageRef = toRef(obj, 'age')
console.log(ageRef.value) // 18
obj.age = 20 // 触发响应式更新
console.log(ageRef.value) // 20

3. toRefs：toRefs用于将一个响应式对象的所有属性都转换成ref对象。它接收一个响应式对象作为参数，返回一个新的对象，该对象的所有属性都是ref对象，它们都与源对象的属性保持同步。

import { reactive, toRefs } from 'vue'
const obj = reactive({ name: 'Tom', age: 18 })
const refs = toRefs(obj)
console.log(refs) // { name: { value: 'Tom' }, age: { value: 18 } }
console.log(refs.name.value) // 'Tom'
obj.name = 'Jerry' // 触发响应式更新
console.log(refs.name.value) // 'Jerry'