Vue 3 中 ref、toRef 和 toRefs 的区别 - 响应式数据管理指南

在 Vue 3 中，ref、toRef 和 toRefs 都是用来创建响应式数据的方法，它们之间有一些区别。

1. ref：ref 是 Vue 3 中最基本的响应式数据创建方法。它接收一个普通的 JavaScript 值作为参数，并返回一个包装后的响应式引用。ref 返回的是一个对象，该对象有一个 value 属性用于获取和设置值。ref 创建的是单个响应式数据。

import { ref } from 'vue'

const count = ref(0) // 创建一个响应式数据

console.log(count.value) // 输出 0
count.value++ // 修改数据并触发响应

2. toRef：toRef 用于将一个对象的属性转换为响应式数据。它接收一个响应式对象和一个属性名作为参数，并返回一个响应式引用，该引用指向原始对象的属性。toRef 创建的是单个响应式数据。

import { reactive, toRef } from 'vue'

const state = reactive({
  count: 0
})

const countRef = toRef(state, 'count') // 将 state 对象的 count 属性转换为响应式数据

console.log(countRef.value) // 输出 0
countRef.value++ // 修改数据并触发响应

3. toRefs：toRefs 用于将一个响应式对象的所有属性转换为响应式数据。它接收一个响应式对象作为参数，并返回一个包含所有属性的对象，每个属性都是一个响应式引用。toRefs 创建的是多个响应式数据。

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello'
})

const stateRefs = toRefs(state) // 将 state 对象的所有属性转换为响应式数据

console.log(stateRefs.count.value) // 输出 0
console.log(stateRefs.message.value) // 输出 'Hello'
stateRefs.count.value++ // 修改数据并触发响应

总结：ref 适用于创建单个响应式数据，而 toRef 和 toRefs 适用于将对象的属性转换为响应式数据。toRef 创建单个属性的响应式数据，而 toRefs 创建对象的所有属性的响应式数据。