toRef() 把属性转成保持连接的 ref

最后更新：2026-10-22

toRef() 把响应式对象的某个属性转成 ref，双向保持连接：通过它读写等于操作原属性。

📝 语法

const state = reactive({ count: 0 })
const count = toRef(state, 'count')
count.value++          // 等价 state.count++

object	响应式对象
key	属性名

返回值：与原属性双向绑定的 ref

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

输出：

两个数字始终相同：改 ref，state.count 同步变化。

💡 提示 标准用法：把 props 的某个字段转成 ref 传给组合式函数，避免丢失响应性。

ℹ️ 说明 toRef(state, 'a') 与 toRefs(state).a 等价；属性不存在时也能创建（可写）。

⚠️ 注意 toRef 只是通道，不会复制数据：源对象被整体替换后连接会断开。

更多案例即将上线。

Q toRef 和 toRefs 的关系？

A toRef 处理单个属性，toRefs 一次性返回所有属性的 ref 对象，后者常用于解构整个状态。

Q 为什么不能用解构代替？

A const { count } = state 拿到的是快照数字，后续变化不再同步——toRef 才能保持连接。

Q 它能用在普通对象上吗？

A 可以，但普通对象没有响应性，ref 只是读写该属性的便捷通道。

Web-Tutorial 技术团队

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