这篇文章的目标只有一个：让你在任何场景下，都能毫不犹豫地判断：这个地方该用ref，还是reactive
目录
- 响应式的本质不是变量
- ref 是什么？什么时候该用 ref？
- ref 的本质
- 什么时候必须用 ref（重点）
- 场景 1：基本类型
- 场景 2：对象 / 数组会被整体替换
- 场景 3：对象是“状态”，而不是“模型”
- ref 的优缺点
- reactive 是什么？什么时候该用 reactive？
- reactive 的本质
- 什么时候 reactive 是最优解
- 场景 1：表单对象
- 场景 2：长期存在的业务模型
- reactive 的优缺点
- 对象到底用 ref 还是 reactive？
- 响应式是怎么“失去”的
- reactive 失效的三大原因
- ref 失效的常见原因
- toRef / toRefs：解决解构问题
- toRef 是什么
- toRefs 批量使用
- 总结
响应式的本质不是变量
在 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？
四个问题法（直接用）
| ref | reactive | |
|---|---|---|
| 会不会被整体替换 | 会 -> ref | 不会 -> reactive |
| 关心"对象是谁"or"字段怎么变"？ | 是谁 -> ref | 字段 -> reactive |
| 会不会大量 v-model | 会 -> reactive | |
| 是不是长期业务模型 | 是 -> 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 负责“状态”
)
