【ref、toRef、toRefs、reactive】

在 Vue3 的组合式 API 中，ref、toRef、toRefs 和 reactive 都是用于创建响应式数据的核心 API，但它们的使用场景和特性有所不同。以下是详细对比：

1. reactive

用于将对象或数组转换为响应式数据（基于 Proxy 实现），直接操作原始对象的属性即可触发响应式更新。

特点：

• 仅对对象/数组有效，对基本类型（number、string 等）无效。
• 响应式是“深层的”：对象的嵌套属性也会被转为响应式。
• 直接返回原始对象的 Proxy 代理，操作时可直接修改属性。

示例：

import { reactive } from 'vue'

const user = reactive({
  name: 'Alice',
  age: 20
})

// 直接修改属性，会触发响应式更新
user.age = 21 

// 嵌套对象也会响应式
user.address = reactive({ city: 'Beijing' })
user.address.city = 'Shanghai' // 触发更新

注意：

• 不能直接替换整个对象（会丢失响应式）：

  user = { name: 'Bob' } // 错误！此时 user 不再是响应式
  

• 解构赋值会丢失响应式（因为解构后得到的是普通值）：

  const { name } = user 
  name = 'Bob' // 不会触发更新
  

2. ref

用于将基本类型（number、string、boolean 等）转换为响应式数据，也可用于对象（但内部会自动用 reactive 处理）。

特点：

• 通过 .value 属性访问/修改值（在模板中使用时无需 .value，Vue 会自动解析）。
• 对基本类型和对象都有效：
  • 基本类型：内部用一个对象包裹（{ value: 原始值 }）实现响应式。
  • 对象类型：内部会调用 reactive 转为响应式对象，.value 等价于 reactive 的返回值。

示例：

import { ref } from 'vue'

// 基本类型
const count = ref(0)
count.value++ // 修改值（需用 .value）
console.log(count.value) // 1

// 对象类型
const user = ref({ name: 'Alice' })
user.value.age = 20 // 等价于 reactive 操作（无需再次 ref）

优势：

• 统一基本类型和对象的响应式处理方式。
• 解构时不会丢失响应式（需配合 .value）。

3. toRef

用于将响应式对象的某个属性转换为独立的 ref 对象，保持与原对象的关联（修改该 ref 会同步影响原对象）。

特点：

• 接收两个参数：toRef(响应式对象, 属性名)。
• 返回的 ref 与原对象属性“双向绑定”：修改 ref.value 会同步更新原对象，原对象属性变化也会同步到 ref。
• 即使原对象属性不存在，也会创建一个 ref（避免 undefined 错误）。

示例：

import { reactive, toRef } from 'vue'

const user = reactive({
  name: 'Alice',
  age: 20
})

// 将 user.age 转为 ref
const ageRef = toRef(user, 'age')

ageRef.value = 21 // 修改 ref，原对象同步更新 → user.age = 21
user.age = 22 // 原对象修改，ref 同步更新 → ageRef.value = 22

用途：

• 当需要传递响应式对象的单个属性时，避免解构丢失响应式。
• 例如在组件传参时，传递 toRef(user, 'name') 比直接传递 user.name 更可靠。

4. toRefs

用于将响应式对象的所有属性批量转换为 ref 对象，返回一个包含这些 ref 的普通对象（键为原属性名，值为对应 ref）。

特点：

• 接收一个响应式对象，返回一个新对象，其每个属性都是 toRef 生成的 ref。
• 所有 ref 与原对象保持双向绑定，修改任何一方都会同步。

示例：

import { reactive, toRefs } from 'vue'

const user = reactive({
  name: 'Alice',
  age: 20
})

// 批量转换所有属性为 ref
const userRefs = toRefs(user)
// userRefs 结构：{ name: ref('Alice'), age: ref(20) }

// 修改 ref，原对象同步更新
userRefs.age.value = 21 → user.age = 21

// 原对象修改，ref 同步更新
user.name = 'Bob' → userRefs.name.value = 'Bob'

用途：

• 解决 reactive 对象解构丢失响应式的问题：

  // 解构后仍保持响应式
  const { name, age } = toRefs(user)
  name.value = 'Bob' // 触发更新
  

• 在组件中返回响应式数据时，方便批量暴露属性（避免逐个写 toRef）。

总结：核心区别与使用场景

最佳实践

• 基本类型用 ref，对象/数组优先用 reactive。
• 解构 reactive 对象时，用 toRefs 保持响应式。
• 传递单个属性时，用 toRef 避免丢失响应式关联。
• 在模板中使用时，ref 和 toRef/toRefs 的 .value 可省略，直接使用变量名。