toRefs 和 toRef 均用于从 reactive 对象中提取响应式引用而不丢失响应性：toRef 精准提取单个属性并支持默认值，返回单个 ref；toRefs 批量映射所有属性，返回含 ref 属性的普通对象，不支持默认值。
toRefs 和 toRef 都是用来把 reactive 对象里的属性“拎出来”，同时不丢响应性的工具。它们不是创建新响应式数据，而是建立指向原属性的引用通道——改它等于改源对象，源对象变了它也立刻跟着变。
什么时候用 toRef？精准提取单个属性
当你只关心 reactive 对象中的某一个字段，并希望它能独立参与逻辑、传参或绑定时，就用 toRef。
- 语法是 toRef(对象, '属性名', 默认值?)，第三个参数可选，用于处理属性可能不存在的情况
- 返回一个标准 ref（有 .value），和源属性双向同步
- 支持对 reactive 数组按索引取值，比如
toRef(list, 0) - 常见于向子组件传递单个响应式 prop，或在组合函数中暴露某个关键字段
什么时候用 toRefs？批量解构整个对象
当你想把 reactive 对象的所有属性都“解构出来”，又不想失去响应性，toRefs 就是标准解法。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 语法是 toRefs(对象)，直接传入 reactive 对象即可
- 返回一个普通对象（非响应式），但它的每个属性都是 ref，比如
{ count: ref(0), name: ref('Vue') } - 常配合解构使用：
const { count, name } = toRefs(state)，之后模板里可直接写{{ count }}（注意仍要count.value在 JS 中读写） - 必须确保对象里所有要转换的属性已存在，不支持为缺失属性设默认值
关键区别：不是功能强弱，而是粒度不同
toRef 是“点对点”的引用，toRefs 是“全量映射”。它们底层都靠引用传递实现同步，没有复制值，也不新建响应式系统。
立即学习“前端免费学习笔记（深入）”；
- 返回值类型不同：toRef 返回单个 ref；toRefs 返回普通对象，其属性才是 ref
- 容错能力不同：toRef 可通过第三个参数兜底；toRefs 遇到不存在的 key 会报错或忽略（取决于 Vue 版本）
- 性能开销不同：toRef 几乎无额外成本；toRefs 需遍历对象所有 ownKeys，属性越多越明显
别踩坑：解构 reactive 本身会丢失响应性
直接写 const { name, age } = person（person 是 reactive）是无效的——name 和 age 变成普通变量，后续修改不会触发更新。必须先用 toRefs 包一层再解构，才能保持响应链完整。
