vue 3 中 ref 自动解包仅发生在 reactive 对象的顶层或深层嵌套属性访问(如 state.count 或 state.user.age)、以及模板中直接使用时;普通对象、数组/map/set 元素、解构赋值后均不解包。

会,但仅限于直接作为 reactive 对象的属性时自动解包;嵌套层级更深或出现在非响应式容器中时,解包行为就会失效。
哪些情况会自动解包
Vue 3 的响应式系统在 reactive 的 Proxy get 拦截器中做了特殊处理:只要读取的值是 ref 类型,就自动返回 .value。
-
顶层属性:如
const state = reactive({ count: ref(0) }),访问state.count得到0 -
深层嵌套对象中的 ref:如
reactive({ user: { age: ref(25) } }),state.user.age仍是25(Vue 支持深层解包) -
模板中直接使用:无论 ref 是独立声明还是嵌在 reactive 里,模板里都无需
.value
哪些情况不会解包
自动解包不是无条件的,它依赖访问路径是否经过 reactive 的 Proxy 拦截。
-
普通对象中嵌套 ref:如
const obj = { count: ref(0) },obj.count就是 ref 实例本身,不会解包 -
数组或 Map/Set 中的 ref 元素:如
reactive([ref(1), ref(2)]),arr[0]仍返回 ref,不自动取.value -
解构后使用:如
const { count } = reactive({ count: ref(0) }),count是原始 ref,不再解包
赋值时也自动同步
解包不仅是读取时的便利,写入同样智能:
- 对
state.count = 5赋值,等价于修改原始 ref 的.value - 原始 ref 和 reactive 中的访问路径保持双向同步
- 但注意:不能用
state.count = ref(5),这会覆盖掉原来的 ref 实例,破坏响应式连接
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










