深入理解ref、reactive【Vue3工程级指南】

这篇文章的目标只有一个：让你在任何场景下，都能毫不犹豫地判断：这个地方该用ref，还是reactive

响应式的本质不是变量

在 Vue3 里，响应式的本质不是变量，而是“引用关系”

• ref：用一个对象包住一个值，通过 .value 访问
• reactive：用 Proxy 代理一个对象

⚠️：Vue 追踪的不是变量名，而是 ref.value 或 Proxy 内部的属性访问

ref 是什么？什么时候该用 ref？

ref 的本质

constcount=ref(0)

• count 是一个对象
• 真正的值在 count.value
• Vue 通过 getter / setter 追踪 .value

在模板里：

{{count}}// 自动解包

在js/ts中：

count.value++

什么时候必须用 ref（重点）

场景 1：基本类型

constloading=ref(false)constpage=ref(1)constkeyword=ref('')

场景 2：对象 / 数组会被整体替换

constlist=ref<Item[]>([])list.value=res.data

如果用 reactive：

constlist=reactive([])list=res.data// ❌ 直接失效

只要你会写 = 重新赋值，就用 ref！！！

场景 3：对象是“状态”，而不是“模型”

什么是状态，什么是模型？？？

constcurrentRow=ref<Row|null>(null)

• 有 / 没有
• 选中 / 取消
• 打开 / 关闭

这是状态，不是业务结构

ref 的优缺点

优点：

• 可以整体替换
• 可以为 null / undefined
• 解构安全
• 状态语义清晰

缺点：

• JS 中需要 .value
• 对象层级深时略显啰嗦

reactive 是什么？什么时候该用 reactive？

reactive 的本质

constform=reactive({name:'',age:18})

• 返回的是一个 Proxy
• 每个属性访问都会被 Vue 追踪
• 没有 .value

什么时候 reactive 是最优解

场景 1：表单对象

constform=reactive({name:'',age:0,role:''})

原因：

• 字段多
• 高频修改单字段
• v-model 非常频繁
• 不需要整体替换

场景 2：长期存在的业务模型

conststate=reactive({loading:false,page:1,pageSize:10})

这些数据：

• 生命周期一致
• 逻辑上属于一组
• 不会被整体重置

reactive 的优缺点

优点：

• 写法自然
• 表单 / v-model 体验极佳
• 代码可读性高

缺点：

• ❌ 不能整体替换
• ❌ 不能为 null
• ❌ 解构会丢响应式

对象到底用 ref 还是 reactive？

四个问题法（直接用）

响应式是怎么“失去”的

reactive 失效的三大原因

form=newForm// ❌ 整体替换const{name}=form// ❌ 解构JSON.parse(JSON.stringify(form))// ❌ 深拷贝

正确做法：

Object.assign(form,newForm)

ref 失效的常见原因

constc=count.value// ❌ 断开引用

因为这里只是把count这个响应式的值给了c而已

toRef / toRefs：解决解构问题

toRef 是什么

constname=toRef(form,'name')

• 把 reactive 的某个字段变成 ref
• 双向同步

toRefs 批量使用

const{name,age}=toRefs(form)

它们的原理都是 把reactive内的变量都解构成响应式的ref包裹的变量

总结

• reactive 负责“结构”
• ref 负责“状态”