toRef 和 toRefs 用于从响应式对象中安全提取属性并保持响应性，避免解构导致的响应丢失；toRefs 转换所有一级属性为 ref，toRef 精准桥接指定属性，均不复制数据，仅建立引用。
在 Vue 3 的响应式系统中，toRef 和 toRefs 主要用于从响应式对象中“安全地提取”属性并保持其响应性，解决解构导致响应性丢失的问题。它们不是创建新响应式数据的工具，而是建立对已有响应式属性的引用桥梁。
解构响应式对象时避免响应性丢失
使用 reactive 创建的对象，直接解构（如 const { count, name } = state）会破坏响应性——因为解构赋值得到的是普通值，不再是响应式代理的 getter/setter 访问通道。toRefs 能把整个响应式对象的每个属性都转为独立的 ref，解构后依然可响应：
const state = reactive({ count: 0, name: 'Vue' })-
const { count, name } = toRefs(state)→ 解构后的count是Ref<number></number>，修改count.value++仍触发视图更新 - 常用于组合式 API 中，把逻辑封装进自定义 Hook 后，再向外透出多个响应式字段
只提取特定属性并维持响应连接
当只需暴露响应式对象中的某几个字段（尤其是需要传给子组件或与其他逻辑耦合时），用 toRef 更精准：
-
const countRef = toRef(state, 'count')→ 返回一个指向state.count的 ref，读写都同步原属性 - 与直接写
ref(state.count)不同：toRef不复制值，而是建立引用关系；原属性变化，ref 自动更新；ref 修改也同步回原对象 - 适合在 props 或 computed 中按需桥接深层嵌套属性，例如
toRef(userProfile, 'profile.address.city')（注意：仅支持一级 key，深层需配合computed）
与模板中 v-model 配合实现双向绑定透传
子组件接收 ref 类型 prop 并使用 v-model 时，父组件需确保传入的是真正的 ref（而非解构后的普通值）。toRef 可将响应式对象字段“转成 ref 接口”，让 v-model 正常工作：
立即学习“前端免费学习笔记（深入）”；
- 父组件：
<childcomponent v-model:title="toRef(state, 'title')"></childcomponent> - 子组件内
v-model:title等价于:title="title" @update:title="$emit('update:title', $event)"，而title是 ref，能正确触发父级响应式更新 - 若直接传
state.title，子组件无法触发父级 reactive 对象更新（缺少 setter 绑定）
性能与边界注意事项
toRef 和 toRefs 开销极小，本质是返回一个带 getter/setter 的 ref 包装器，不复制数据也不新建 proxy。但需注意：
- 仅对已存在的响应式属性有效；对 reactive 对象中后续新增的属性，
toRef(obj, 'newKey')初始值为undefined，且不会自动响应后续添加（除非配合proxy的settrap 或使用shallowRef+ 手动监听） -
toRefs不递归处理嵌套对象：它只处理第一层属性。若state.info = reactive({ age: 25 })，toRefs(state)中的info仍是 reactive 对象，不是 ref，需再次toRefs(info)或用toRef(state, 'info')+computed拆解 - 在
setup()中频繁调用无副作用，但过度拆解可能削弱响应式数据的语义聚合，建议按业务边界合理分组导出
