【Vue3】 中 ref 与 reactive：状态与模型的深入理解
目录
- Vue3 中 ref 与 reactive：状态与模型的深入理解
- 一、概念区分：状态 vs 模型
- 状态（State）
- 模型（Model / 业务模型）
- 二、ref vs reactive 使用原则
- 三、典型使用示例
- 状态（ref）
- 模型（reactive）
- 四、响应式失效场景
- reactive 失效
- ref 失效
- 五、toRef / toRefs 简单说明
- 六、const vs let
- 七、企业级标准写法
- 八、总结
Vue3 中 ref 与 reactive：状态与模型的深入理解
一、概念区分：状态 vs 模型
在 Vue3 里，理解状态（State）和模型（Model）的区别，是选用 ref 或 reactive 的核心。
状态（State）
- 描述“当前的情况”，组件或业务逻辑随时间变化的值
- 生命周期短，通常只在当前页面或组件内存在
- 用途：驱动界面渲染，表示当前状态
示例（ToB 项目中常见）：
constloading=ref(false)// 是否加载中constcurrentRow=ref<Row|null>(null)// 当前选中行constisModalOpen=ref(false)// 模态框是否打开特点：
- 可为空或可替换
- 整体赋值频繁
- 对象通常较简单，字段不多
模型（Model / 业务模型）
- 描述业务对象或数据结构
- 生命周期相对长，从接口获取到组件销毁
- 内部字段会频繁修改，但整体对象通常不会被替换
示例（表单对象）：
constform=reactive({name:'',age:0,role:'',enable:true})特点：
- 字段多、层级可能复杂
- 内部字段修改频繁
- 用于表单绑定、业务数据处理
二、ref vs reactive 使用原则
| 场景 | 适合类型 | 使用原因 | 优缺点 |
|---|---|---|---|
| 状态 | 选中项、loading、modal开关、timer | 关注“变量是谁”，可能整体替换 | ✅ 可空、可替换、生命周期短 ❌ 访问深层字段需要 .value |
| 模型 | 表单对象、业务实体、配置对象 | 关注内部字段修改，不会整体替换 | ✅ 模板 v-model 友好、字段可直接访问 ❌ 整体替换不行、解构易失效 |
口诀：
关心整个变量是谁 → 状态 → ref
关心内部字段 → 模型 → reactive
三、典型使用示例
状态（ref）
constloading=ref(false)constcurrentRow=ref<Row|null>(null)constisModalOpen=ref(false)constselectRow=(row:Row)=>{currentRow.value=row}constcloseModal=()=>{currentRow.value=nullisModalOpen.value=false}模型（reactive）
constform=reactive({name:'',age:0,role:'',enable:true})// 修改字段form.name='ssy'form.age=18form.enable=false// 初始化 / 填充表单Object.assign(form,res.data)四、响应式失效场景
reactive 失效
- 整体替换：
form={name:'new'}// ❌- 解构：
const{name}=form// ❌- 深拷贝 / JSON 化：
constcopy=JSON.parse(JSON.stringify(form))// ❌ref 失效
- 忘记
.value：
count++// ❌- 解构对象字段：
const{name}=formRef.value// ❌解决方法：使用toRef或toRefs
五、toRef / toRefs 简单说明
- toRef：将 reactive 对象的某个属性单独变成 ref
- toRefs：批量生成 ref
constform=reactive({name:'',age:18})constname=toRef(form,'name')const{name,age}=toRefs(form)六、const vs let
默认 const，因为 ref / reactive 内部的值是可变的，不需要重新赋值变量名
使用 let的场景：
- 变量名会被重新赋值（timer, editorInstance, 流程变量）
- 循环累计 / 分支赋值
lettimer:number|null=nulltimer=setTimeout(...)七、企业级标准写法
// 状态constloading=ref(false)constlist=ref<Item[]>([])constcurrentRow=ref<Row|null>(null)// 表单 / 模型constform=reactive({name:'',age:0,role:''})八、总结
- 状态 → ref：可空、可替换、短生命周期、关心“是谁”
- 模型 → reactive：字段多、长期存在、关心字段变化
- toRef / toRefs：解构 reactive 保持响应
- const 优先，let 仅在变量会被重赋值时使用