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企业级项目开发实战微课视频版》

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

相关推荐

深度解析旅游网站建设的意义及其对行业发展的深远影响与核心价值体现

VGG-T3技术解析：3D重建速度的革命性突破

电力系统调度中的源荷不确定性建模与优化实践

更多资讯

Monero 区块链导入导出工具实战指南：monero-blockchain-export 与 monero-blockchain-import 完整使用手册

宝塔面板部署Django项目：从安装到外网访问完整指南

Mockery 教程：在 Laravel 项目中模拟 Demeter 链与流式接口（Demeter Chains Mocking）

ITR客户服务流程实战：SLA分级、角色分工与升级机制落地指南

Work Agent深度解读：AI如何完成长程复杂任务

亿铸科技公司简介：以3D DRAM通用存算一体，应对大模型算力与能耗之困

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？