一、引言

在 Vue 3 的响应式系统中，ref 和 reactive 是最常用的两个 API。当它们配合使用时，会出现一些特殊的"自动解包"行为。本文将深入剖析这一特性，帮助你彻底掌握 ref 在 reactive 环境中的表现。

二、核心概念速览

• ref: 用于创建响应式基本类型值（也可用于对象），通过 .value 访问

• reactive: 用于创建响应式对象，直接访问属性

• 自动解包: 当 ref 作为 reactive 对象的属性时，可以省略 .value 直接访问

三、基础示例解析

import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({
  count // 将 ref 放入 reactive 对象
})

console.log(state.count) // 0 (自动解包，无需 .value)
state.count = 1          // 直接赋值
console.log(count.value) // 1 (原始 ref 同步更新)

现象解释：

访问 state.count 时，Vue 自动解包获取 count.value

修改 state.count 时，Vue 自动更新 count.value

两者保持双向同步（双向绑定）

四、深度解包机制

1.嵌套对象中的表现

const deepState = reactive({
  nested: {
    count: ref(0) // 深层嵌套也会解包
  }
})

console.log(deepState.nested.count) // 0 (自动解包)

2.浅层 reactive 的例外（使用：shallwReactive）

import { shallowReactive } from 'vue'

const shallowState = shallowReactive({
  count: ref(0) // 浅层 reactive 不会解包
})

console.log(shallowState.count.value) // 需要手动 .value

五、替换 ref 的注意事项

const count = ref(0)
const state = reactive({ count })

const newCount = ref(2)
state.count = newCount // 替换 ref

console.log(state.count) // 2
console.log(count.value) // 0 (原 ref 已断开连接)

现象解释：

• 新 ref 会完全替换旧 ref

• 原 ref 不再与 reactive 对象关联

• 这种替换是响应式的

六、总结

Vue 3 的 ref 自动解包机制使得：代码更简洁（减少 .value），响应式系统更智能，组合式 API 更易用

记住关键规则：

1. 仅深层 reactive 对象会解包

2. 替换 ref 会断开旧连接

3. 浅层 shallowReactive / shallowRef 不会解包