ref()
定义: ref()接收一个普通的Javascript值作为参数，将其转换为响应式对象（ref对象）。
ref对象有一个.value属性，用于获取和修改之。
参数1: 一个普通的Javascript值作为参数
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++ // 1
参数2: 一个工厂函数，用于创建延迟计算的响应式对象。
import { ref } from 'vue'
const name = ref(() => {
console.log('计算 name')
return 'Vue 3'
})
console.log(name.value) // 计算 name, Vue 3
返回: 响应式对象
toRef()
定义: 将一个响应式对象的属性转换为一个单独的ref对象。
参数：第一个参数，响应式对象；第二个参数，响应式对象的某一属性。
作用：转换后的ref对象与原对象属性具有相同的响应式行为。当修改ref对象时，原对象的属性也会同时更新。
import { reactive, toRef } from 'vue'
const user = reactive({
name: 'Tom',
age: 20
})
const ageRef = toRef(user, 'age')
console.log(ageRef.value) // 20
ageRef.value++
console.log(user.age) // 21
toRefs()
定义: 将一个响应式对象转换成普通Javascript对象，这个普通对象中的所有属性都是ref对象。
参数：响应式对象
作用: 当修改ref对象时，原对象的属性也会同步更新。
import { reactive, toRefs } from 'vue'
const user = reactive({
name: 'Tom',
age: 20
})
const userRefs = toRefs(user)
console.log(userRefs.age.value) // 20
userRefs.age.value++
console.log(user.age) // 21
reactive()
定义：将一个普通Javascript对象转换为响应式对象
参数：普通对象
作用：响应式对象中的所有属性都是响应式的，当属性的值改变时，视图会自动更新。
import { reactive } from 'vue'
const user = reactive({
name: 'Tom',
age: 20
})
console.log(user.age) // 20
user.age++
// 视图自动更新
总
ref()用于创建简单的响应式对象；
toRef()用于将响应式对象的属性转换为单独的ref对象；
toRefs()用于将整个响应式对象转换成普通对象，每一个属性都是ref对象；
reactive()用于创建嵌套响应式对象
toRef() & toRefs()是两个不同的函数，用于处理响应式对象中的属性
在 Vue 3 中，toRefs() 和 toRef() 是两个不同的函数，用于处理响应式对象中的属性。
toRefs() 函数接受一个响应式对象，返回一个新的对象，该对象将所有属性转换为 ref 对象。这是因为当我们将响应式对象传递给子组件时，我们需要将其解构为单独的 ref 对象以避免在子组件中更改属性时破坏父组件的响应式追踪。通过使用 toRefs() 函数，我们可以将响应式对象的所有属性转换为 ref 对象，并将其传递给子组件，以便在子组件中使用属性时保持响应式追踪。
import { reactive, toRefs } from 'vue'
const state = reactive({
name: 'John',
age: 30
})
const refs = toRefs(state)
console.log(refs.name.value) // 'John'
toRef() 函数接受一个响应式对象和一个属性名称，返回一个新的 ref 对象，该对象引用响应式对象的属性。这是因为在某些情况下，我们只需要引用响应式对象的单个属性，并且不需要将整个响应式对象的属性都转换为 ref 对象。使用 toRef() 函数，我们可以将响应式对象的单个属性转换为 ref 对象。
import { reactive, toRef } from 'vue'
const state = reactive({
name: 'John',
age: 30
})
const ageRef = toRef(state, 'age')
console.log(ageRef.value) // 30
