不能直接解构 reactive 对象，因其返回 proxy，解构后丢失响应性；应使用 torefs 包装后解构，或直接返回 ref 并通过 .value 操作，torefs 仅处理第一层属性。

在 Vue 组合式函数里用对象解构，核心是“解构不破坏响应性”——直接解构 reactive 对象会丢失响应，必须配合 toRefs 或合理使用 ref。

为什么不能直接解构 reactive 对象？

reactive 返回的是一个 Proxy 代理对象，它的响应性绑定在属性访问路径上（比如 state.count）。一旦你写成：

const { count } = reactive({ count: 0 })

得到的 count 就是个普通数字，不再是响应式引用。后续修改它不会触发视图更新。

正确做法：用 toRefs 包装后解构

toRefs 把 reactive 对象的第一层每个属性都转成独立的 ref，保留响应性，同时支持解构：

• 在组合式函数中返回 toRefs(state)
• 调用方解构时就能拿到带响应性的变量
• 模板中直接用 {{ count }}，JS 中用 count.value 修改

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function useCounter() {
  const state = reactive({ count: 0, name: 'Vue' })
  return toRefs(state)
}

const { count, name } = useCounter() // ✅ 响应式解构

ref 场景下解构更简单，但要注意 .value

如果组合式函数内部用的是多个 ref（比如 const count = ref(0)），那返回它们组成的对象后，可直接解构 —— 因为每个 ref 本身已是响应式引用：

• 返回 { count, name } 即可，无需 toRefs
• 解构后仍需通过 count.value 读写
• 模板中自动解包，写 {{ count }} 就行

这种写法更适合逻辑粒度细、状态彼此独立的场景。

嵌套对象要小心：toRefs 只处理第一层

如果 reactive 对象里有嵌套结构，比如：

const state = reactive({
  user: { profile: { age: 25 } }
})

用 toRefs(state) 后，user 是响应式 ref，但 user.value.profile.age 不再响应 —— 它只是个普通对象。需要深层响应，得手动用 toRef(state, 'user') 或把嵌套部分也设为 reactive/ref。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南