toRefs() 把对象转成一族 ref

最后更新：2026-10-22

toRefs() 把响应式对象的每个属性转成 ref，解构后仍保持响应性，是解构 reactive 状态的标准做法。

📝 语法

const state = reactive({ a: 1, b: 2 })
const { a, b } = toRefs(state)   // a、b 都是 ref，仍与 state 同步
a.value++                        // state.a 同步 +1

object	响应式对象（reactive 代理）

返回值：属性名 → ref 的普通对象

修改下面的代码，在预览区实时查看效果：

输出：

点击按钮两个数字同时变化——解构值与源对象保持连接。

💡 提示 从组合式函数返回 reactive 状态时用 toRefs，调用方解构即可安全使用。

⚠️ 注意 只对 reactive 对象有意义：对普通对象调用只得到互不相关的 ref 快照。

ℹ️ 说明 组件 setup 返回 toRefs 的对象可直接在模板使用（模板自动解包）。

更多案例即将上线。

Q 不用 toRefs 直接解构会怎样？

A 拿到的是当时的快照值，后续源对象变化不会反映，视图不更新。

Q 能对 ref 使用吗？

A 不适合：ref 本身已是响应式单元，直接使用或用 unref 取值即可。

Q 解构后修改会写回源对象吗？

A 会，因为是同一个属性的双向通道。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。