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

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

回答：
在 Vue 3 的 Composition API 中，ref 和 reactive 都用于创建响应式数据，但它们的使用方式和适用场景不同：

• ref：用于将基本类型（如 string、number、boolean）或对象包装成一个响应式引用。访问或修改 ref 创建的值时，需要通过 .value 属性（在 setup() 函数内部）。在模板中使用时，Vue 会自动解包 .value，无需手动写。
• reactive：用于将一个普通对象（包括数组、嵌套对象等）转换为响应式对象，基于 ES6 Proxy 实现。它不能直接用于基本类型，且返回的是原始对象的代理。

选择建议：

• 如果你需要响应式的基本类型值（如 count = 0），使用 ref。
• 如果你有一个复杂的对象或状态树（如 user = { name: 'Alice', age: 25 }），使用 reactive 更自然。
• 在组合函数（composables）中，通常推荐统一使用 ref，因为 ref 是“引用”类型，便于在函数间传递和解构而不丢失响应性。
• 注意：reactive 对象解构后会失去响应性，而 ref 解构后仍可通过 .value 访问（或配合 toRefs 保持响应性）。

示例：

import { ref, reactive, toRefs } from 'vue'

// 使用 ref
const count = ref(0)
count.value++ // 修改需 .value

// 使用 reactive
const state = reactive({ name: 'John', age: 30 })
state.age++ // 直接修改属性

// 若需解构 reactive 对象，应使用 toRefs
const { name, age } = toRefs(state) // 保持响应性