选 ref 还是 reactive 取决于数据形态与使用场景：ref 适合基础类型、需解构/传参/模板直用；reactive 适合纯对象或数组且整块管理。
选 ref 还是 reactive？关键不在“哪个更好”，而在“用在哪儿更自然、更少出错”。Vue 3 的响应式设计本意是让开发者按数据形态直觉选择，而不是强行统一。
ref 适合：基础类型、需要解构/传参、模板中直接使用
ref 包裹任意值（数字、字符串、布尔、null、甚至对象），返回一个带 .value 的响应式引用。它的存在意义，是解决 JavaScript 基础类型无法被 Proxy 拦截的硬限制。
- 需要在函数参数、解构、for 循环变量中保持响应性时，必须用
ref—— 因为解构会丢失响应性，而ref的.value是稳定入口 - 模板中可直接写
{{ count }}（Vue 自动解包ref），不用写{{ count.value }} - 组合式 API 中定义局部状态（如按钮 loading、输入框值）几乎都用
ref，语义清晰、不易误用
reactive 适合：纯对象或数组，且你控制整个引用生命周期
reactive 接收一个对象（或数组），返回其响应式代理。它底层用 Proxy 实现，因此只支持对象/数组，不支持基础类型。
- 当你有一组强关联的字段（比如表单数据
{ name: '', email: '', age: 0 }），用reactive更紧凑，访问无需.value，写法更接近普通 JS 对象 - 但注意：一旦从
reactive对象里解构属性（如const { name } = form），name就脱离响应式了 —— 此时应改用toRefs(form)或直接用form.name - 不能对
reactive返回值重新赋值（form = {}会丢失响应性），它只代理已有属性的读写
别踩坑：常见混淆场景怎么选
以下情况有明确倾向性，不是“都可以”，而是“一个明显更稳”：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
-
函数返回响应式数据？ → 用
ref。因为函数可能返回基础类型，也可能返回对象，ref统一兜底；reactive遇到非对象会静默失败 -
props 默认值要响应式？ → 用
ref。例如const props = defineProps({ count: { type: Number, default: 0 } })，内部想基于它派生响应式状态，得包装成ref(props.count) -
需要 shallowReactive 或 readonly？ → 它们只接受对象，所以只能基于
reactive的结果再处理；ref对应的是shallowRef和readonly(ref)
进阶技巧：ref 和 reactive 其实能协作，不是对立
它们可以互相转化，按需组合：
-
reactive({ count: ref(0) })合法 —— 对象里嵌ref，既保留ref的可替换性，又享受reactive的简洁访问 -
toRef(obj, 'count')可以从reactive对象中安全提取响应式引用，解构也不丢响应性 -
unref(value)是通用解包工具：自动处理ref的.value和普通值，适合写工具函数
响应式选择的本质，是匹配你的数据使用方式。基础类型、需解构、常传参 → ref；结构化对象、整块管理、不频繁替换引用 → reactive。用对了，代码更顺；混用了，bug 往往藏在 .value 忘写或解构失响应里。
