优先使用 ref，尤其对新手或日常开发——它更通用、容错性高、覆盖所有类型；基本类型必须用 ref，reactive 对 string/number/boolean 无效；对象/数组结构稳定时 reactive 更简洁；解构、传参、组合式函数必须用 ref；两者可混合使用。
推荐优先用 ref，尤其对新手或日常开发场景——它更通用、容错性高、不易丢响应性，且覆盖所有类型。
基本类型必须用 ref
JavaScript 的 string、number、boolean 无法被 Proxy 直接代理，reactive 对它们无效（会静默失败）。ref 则专为这类值设计：内部包装成 { value: xxx }，再用响应式机制处理 .value。
-
const count = ref(0)✅ 正常响应 -
const state = reactive(123)❌ 不报错但无响应 -
const loading = ref(false)✅ 模板中直接写{{ loading }}，脚本中改loading.value = true
对象/数组结构稳定时，reactive 更简洁自然
当数据是明确的嵌套对象（如表单、用户配置），且不频繁整体替换，reactive 写法更接近原生 JS，属性访问无需 .value，深层嵌套自动响应。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
const form = reactive({ name: '', email: '', profile: { age: 0 } })- 后续修改
form.profile.age = 25或form.email = 'a@b.com'都能触发更新 - 注意：不能写
form = { ... }，否则整个响应式丢失
需要解构、传参或封装组合式函数时，ref 是唯一安全选择
reactive 解构后会脱离响应式代理（const { name } = reactive({ name: 'A' }) 中的 name 不响应）；而 ref 在组合式函数中返回 { count, loading }，调用方解构也不会断响应性。
- 自定义 Hook 必须用 ref 封装状态：
return { data: ref(null), error: ref('') } - 向子组件传 ref 变量，能保持响应性穿透；传 reactive 对象的某个属性则可能失效
- DOM 引用（
ref()与template ref同名但语义一致）也只支持 ref
混合使用很常见，别硬选“唯一”方案
实际项目里两者常共存：用 reactive 管理主数据对象，用 ref 控制开关、计数器、异步状态等离散信号。也可用 toRefs 把 reactive 解构成 ref 形式供模板或解构使用。
const state = reactive({ list: [], total: 0 })-
const { list, total } = toRefs(state)→ 得到两个 ref，可安全解构和传递 - 模板中仍可混用：
{{ list }} / {{ total }} / {{ isLoading }}（isLoading 是 ref）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
