Vue 3 中的 ref 和 reactive 有什么区别？应该如何选择使用？

Vue 3 中的 ref 和 reactive 有什么区别？应该如何选择使用？

回答：
在 Vue 3 的 Composition API 中，ref 和 reactive 都用于创建响应式数据，但它们有以下关键区别：

1. 数据类型支持：

   • ref 可以用于基本类型（如 string、number、boolean）和对象。对于基本类型，必须使用 ref，因为 JavaScript 的基本类型是按值传递的，无法被 Proxy 拦截。
   • reactive 只能用于对象（包括数组和内嵌对象），它是基于 ES6 Proxy 实现的，不能包装基本类型。

2. 访问方式：

   • ref 创建的是一个包含 .value 属性的对象，在 script 中访问或修改时需要通过 .value；但在模板中，Vue 会自动解包，无需写 .value。
   • reactive 返回的是一个响应式代理对象，直接通过属性访问即可（如 state.count），无需额外操作。

3. 重新赋值行为：

   • 对 ref 重新赋值（如 count.value = 5）会保持响应性。
   • 对 reactive 变量整体重新赋值（如 state = { count: 5 }）会丢失响应性，因为新对象未被 reactive 包裹。

4. 适用场景：

   • 如果需要响应式的基本类型，或者希望在函数间传递/返回单个响应式值，优先使用 ref。
   • 如果管理的是复杂对象或状态树，且不需要频繁替换整个对象，使用 reactive 更简洁。

示例：

import { ref, reactive } from 'vue'

// ref 适用于基本类型
const count = ref(0)
count.value++ // 在逻辑中需 .value

// reactive 适用于对象
const state = reactive({ name: 'Alice', age: 25 })
state.age++ // 直接访问属性

总结：

• 基本类型 → 必须用 ref
• 对象/数组 → 可用 reactive 或 ref（ref 包装对象内部也会转为 reactive）
• 团队协作或复杂逻辑中，统一使用 ref 有时更清晰，避免混淆。