ref 与 reactive：包装语义、代理边界与模板解包

主题边界

ref 和 reactive 的差异不只是“一个给基本类型，一个给对象”。
ref 创建的是带 .value 的稳定容器，reactive 创建的是对象代理；两者在替换语义、解构行为和模板解包上都有明显差异。

机制与流程

ref(value) 返回 RefImpl，依赖收集发生在 .value 的 getter/setter 上；对象型 ref 内部仍会把对象交给 reactive 处理。
reactive(target) 直接返回 Proxy，更适合“对象本体就是状态单元”的场景。
模板和 setup() 返回值会对顶层 ref 做自动解包，但普通 JavaScript、数组、Map、解构赋值里不会自动解包。

关键差异

ref 更适合标量、可整体替换的值，以及需要稳定容器边界的场景。
reactive 更适合结构化对象状态，但直接解构会丢失响应性，因此需要 toRefs / toRef 重新包装属性。

边界条件

reactive 不是“更高级的 ref”；它解决的是对象代理，不适合 primitive。
ref 也不是只能给基本类型，对象型 ref 在状态快照、整体替换和异步装载中很常见。

工程落点

组件和 composable 的状态设计，本质上是在决定边界是“值容器”还是“对象代理”。
只停在基本类型 vs 对象，会在 toRefs、模板解包和状态重置这些追问上立即失速。

相关主题