在 Vue 3 组合式 API 开发中，reactive 能快速创建复杂对象的响应式数据。但随之而来的最大痛点是——直接解构会导致响应式失效。这让我们在拆分状态、传递给子组件或抽离逻辑时常常陷入“数据不更新”“页面卡死”的困扰。toRef 与 toRefs 正是为解决这一主要痛点而生的“响应式保留工具”，它们能够在保持引用关系的前提下安全拆分 reactive 对象。

一、主要作用：保留响应式的“拆分工具”

. toRef 的主要作用

toRef 为 reactive 对象的单个属性创建一个 Ref。对应属性保持双向绑定

• 响应式关联保留：修改 Ref 的 .value 会同步更新原对象属性，反之亦然。
• 非拷贝而是引用：仅建立引用关系。 不产生额外的数据副本，适合大型对象。
• 支持可选属性：即使属性不存在也能返回一个值为 undefined 的 Ref，不会抛错。

语法： toRef

toRefs 是 toRef 的批量版。它遍历整个 reactive 对象，为每个可枚举属性生成对应的 Ref，并返回一个普通对象：

• 批量转换：`reactive` 的所有顶层属性都被包装成 Ref。
• 响应式联动：
• 解构安全：

. toRef 与 toRefs 的区别对比

Let's rewrite properly: