Vue 中 ref 和 reactive 有什么区别？该用哪个？

Vue 中 ref 和 reactive 有什么区别该用哪个一句话总结ref 适合「基本类型 需要重新赋值」的场景reactive 适合「对象/数组 不需要整体替换」的场景。记不住基本类型用 ref对象用 reactive需要整体替换的用 ref 包对象就这么简单正文目录ref 和 reactive 的核心区别是什么5 大高频场景 代码示例万能兜底ref vs reactive 决策表预防 checklist不再踩坑一句话总结一、ref 和 reactive 的核心区别是什么问题背景Vue 3 的响应式系统基于Proxy提供了ref和reactive两种创建响应式数据的 API很多开发者分不清什么时候用哪个。对比项refreactive支持类型任意类型基本类型 对象仅对象/数组访问方式.value模板中自动解包直接访问属性重新赋值✅ 直接xxx.value newVal❌ 丢失响应式解构需要配合toRefs直接解构会丢失响应式模板中使用自动解包无需.value直接使用深层响应✅ 默认深层✅ 默认深层import{ref,reactive}fromvue// ✅ ref基本类型constcountref(0)count.value// JS 中需要 .value// 模板中{{ count }} 自动解包不需要 .value// ✅ reactive对象conststatereactive({name:Claw,age:3})state.age4// 直接修改属性// ❌ reactive 整体替换 → 丢失响应式statereactive({name:New,age:5})// 不报错但响应式断了二、5 大高频场景 代码示例场景 1计数器 / 开关 → 用 ref基本类型需要频繁修改用 ref 最直观。// ✅ 正确基本类型用 refconstisLoadingref(false)constcountref(0)constmessageref(hello)functiontoggle(){isLoading.value!isLoading.value}// ❌ 错误reactive 不支持基本类型constcountreactive(0)// Vue 警告value should be an object场景 2表单对象 → 用 reactive多个关联字段组成一个对象不需要整体替换用 reactive 更自然。script setup import { reactive } from vue // ✅ 表单对象用 reactive const form reactive({ username: , password: , remember: false }) function submit() { console.log(form.username, form.password) } function reset() { // ⚠️ 逐字段重置不能整体替换 form.username form.password form.remember false } /script// ❌ 错误整体替换丢失响应式functionreset(){form{username:,password:,remember:false}// 响应式断了}场景 3需要整体替换的对象 → 用 ref从接口拿数据后整体赋值用 ref 包对象更安全。// ✅ 正确接口数据用 ref方便整体替换constuserInforef(null)asyncfunctionfetchUser(){constresawaitapi.getUser()userInfo.valueres.data// ✅ 整体替换没问题}// ❌ 麻烦reactive 要逐字段赋值constuserInforeactive({})asyncfunctionfetchUser(){constresawaitapi.getUser()Object.assign(userInfo,res.data)// 能用但啰嗦// 或者逐字段userInfo.name res.data.name ...}场景 4解构响应式对象 → 用 toRefs 配合 reactivereactive 解构后会丢失响应式必须用toRefs包装。script setup import { reactive, toRefs } from vue const state reactive({ name: Claw, age: 3 }) // ❌ 直接解构丢失响应式 // const { name, age } state // ✅ toRefs 解构保持响应式 const { name, age } toRefs(state) /script// ref 则不需要 toRefsconstcountref(0)// 模板中直接用 {{ count }}无需解构场景 5watch 监听 → ref 和 reactive 行为不同import{ref,reactive,watch}fromvue// ✅ refwatch 默认监听 .value 的变化constcountref(0)watch(count,(newVal,oldVal){console.log(${oldVal}→${newVal})})// ✅ reactivewatch 默认深层监听conststatereactive({count:0})watch(state,(newVal){console.log(state changed,newVal.count)})// ⚠️ watch reactive 的某个属性 → 需要用 getterwatch(()state.count,(newVal,oldVal){console.log(${oldVal}→${newVal})})// ⚠️ ref 包对象 → 默认不深层监听需要 deepconstobjref({count:0})watch(obj,(newVal){console.log(newVal)// obj.value {} 时触发},{deep:true})// 修改 obj.value.count 需要 deep三、万能兜底ref vs reactive 决策表场景用什么原因基本类型string/number/booleanrefreactive 不支持基本类型独立的对象/数组不需要整体替换reactive访问自然不需要.value接口返回的数据需要整体替换ref可以直接xxx.value newData表单对象reactive字段关联逐字段操作需要解构使用的对象reactivetoRefsref 不需要解构定时器/ DOM 引用ref存任意值不触发渲染组合式函数返回值ref调用方可以解构后保持响应式万能决策流程是基本类型吗 → 是 → 用 ref → 否 → 需要整体替换吗 → 是 → 用 ref包对象 → 否 → 用 reactive// 万能模板import{ref,reactive}fromvue// 基本类型constloadingref(false)consttotalref(0)// 对象 - 不需要整体替换constformreactive({name:,email:})// 对象 - 需要整体替换接口数据constlistref([])asyncfunctionloadData(){list.valueawaitapi.getList()}四、预防 checklist不再踩坑基本类型必须用ref不要用reactivereactive对象不要整体替换用Object.assign或逐字段赋值接口数据整体赋值 → 用ref包对象解构reactive→ 必须用toRefs或toRef模板中ref自动解包JS 中必须.valuewatch监听reactive属性 → 用 getter 函数() state.xxxwatch监听ref对象的深层变化 → 加{ deep: true }组合式函数返回值优先用ref方便调用方解构五、一句话总结基本类型用 ref固定结构对象用 reactive需要整体替换的对象用 ref 包裹——记不住就看要不要重新赋值要重新赋值就用 ref。最后问候亲爱的朋友们并邀请你们阅读我的全新著作 《Vue.js 3企业级项目开发实战微课视频版》