Vue 3 中 reactive 适用于对象/数组结构，ref 适用于基础类型、函数返回值及 DOM 引用；混合场景用 toRefs 或 ref 更灵活，二者语义与适用边界明确。
在 Vue 3 中，reactive 和 ref 都是创建响应式数据的核心 API，但它们的适用边界和使用习惯有明显差异。选型不当容易导致代码冗余、类型推导困难、或响应式失效——关键不在“哪个更好”，而在于“哪个更贴合当前场景”。
对象/数组结构为主时，优先用 reactive
当处理的是一个具有多个属性的普通对象（如表单数据、API 返回的嵌套结构）或数组时，reactive 更简洁自然：
- 无需频繁解构或访问 .value，写法接近原生 JS 对象操作
- 深层嵌套属性自动响应（基于 Proxy），无需手动包装子对象
- 配合 TypeScript 推导更准确，尤其在解构 props 或 defineProps 类型时
例如管理用户信息：const user = reactive({ name: '张三', profile: { age: 28 } })，后续直接 user.profile.age = 29 即可触发更新。
基础类型、函数返回值或需要被解构的响应式变量，用 ref
ref 的核心价值在于统一了响应式“容器”的抽象：它能把任意值（包括 number、string、boolean、null、甚至函数调用结果）变成响应式，并保持 .value 访问一致性：
立即学习“前端免费学习笔记（深入）”；
- 在组合式函数（composable）中返回响应式状态时，必须用 ref（否则解构后会丢失响应性）
- 模板中使用时，Vue 自动解包 ref，无需写 .value；但在 JS 逻辑中必须显式访问 .value
- 适合做计数器、开关标志、异步加载状态等单一值场景
例如：const count = ref(0)、const isLoading = ref(false)，或封装一个自定义 hook：return { data: ref(null), loading: ref(false) }。
混合结构或需动态 key 场景，reactive + toRefs 或 ref 更灵活
如果一个响应式对象需要被解构到模板或多个作用域（比如从 setup 返回给 template），直接 return reactive 对象会导致解构后失去响应性。此时有两种稳妥做法：
- 用 toRefs 将 reactive 对象转为一连串 ref，解构安全且保持响应
- 对部分动态字段（如通过 key 计算的属性），用 ref 单独管理更清晰，避免 reactive 的 Proxy 陷阱（如原型链、Map/Set 等非标准对象需特殊处理）
例如动态表单项：const fields = reactive({}) 不推荐；改用 const fields = ref({})，或用 const fields = reactive(new Map()) 并搭配 toRef 按需提取。
与 DOM 元素或组件实例交互时，必须用 ref
ref 还承担着“引用绑定”的语义功能——这是 reactive 完全不支持的：
- 模板中通过 <input ref="inputEl"> 绑定 DOM 元素，对应 JS 中 const inputEl = ref(null)
- 获取子组件实例、调用其方法、或监听其生命周期，也依赖 ref 做宿主容器
- 这种 ref 是“模板 ref”，与响应式 ref 同名但语义不同，Vue 内部会自动赋值
注意：不要用 reactive 包裹 ref 绑定目标，也不要把 ref 实例再套一层 reactive——这既无必要，也可能引发类型或行为异常。
