toRef 和 toRefs 用于解决 reactive 对象解构后丢失响应式的问题：toRefs 批量创建原对象各属性的 ref 引用，toRef 精准提取单个属性引用，二者均保持与原始数据的响应式连接，而 ref 则创建独立副本。
在 Vue 3 Composition API 中，直接解构 reactive 对象会丢失响应式，toRef 和 toRefs 就是用来解决这个问题的核心工具。它们不创建新数据，而是建立对原始响应式属性的“引用链接”，确保解构后的变量仍能触发视图更新。
为什么直接解构 reactive 会失效
当你写 const { count } = state（其中 state = reactive({ count: 0 })），得到的 count 是一个普通数值，不是响应式代理。后续修改 count++ 只改变局部变量，不会影响 state.count，页面自然不更新。
这是因为 JavaScript 解构是“值拷贝”，而 reactive 的响应式依赖 Proxy 拦截，一旦脱离原始对象上下文，拦截就断了。
toRefs：批量解构整个 reactive 对象
适用于需要把响应式对象所有属性都解构出来、又想保持响应式的场景，比如模板中频繁使用多个字段，或要传递给子组件。
立即学习“前端免费学习笔记（深入）”；
- 调用
toRefs(state)返回一个新对象，其每个属性都是ref类型，且.value指向state对应属性 - 解构后可直接在模板中使用，无需
.value（Vue 自动解包） - 在 script 中修改仍需通过
.value，例如count.value++
示例：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
const state = reactive({ name: 'Alice', age: 25 });<br>const { name, age } = toRefs(state); // name 和 age 都是 ref<br>name.value = 'Bob'; // 触发更新，state.name 同步变
toRef：精准提取单个响应式属性
适合只关心某一个字段、或需要将某个属性单独暴露给组合函数、props 或 computed 的情况。
- 语法为
toRef(obj, key)，返回一个ref，其.value与obj[key]实时同步 - 即使
key当前不存在，toRef也会创建该响应式属性（避免报错） - 常用于封装逻辑：比如把
user.profile提取为独立profileRef，再传给自定义 hook
示例：
const user = reactive({ profile: { city: 'Beijing' } });<br>const profileRef = toRef(user, 'profile');<br>// 修改 profileRef.value.city 会同步更新 user.profile.city
和 ref 的关键区别
ref 创建的是全新响应式容器，与原数据无关联；toRef/toRefs 创建的是“指向原数据的指针”，改它等于改源头。
- 用
ref(state.count)得到的是副本，改它不影响state.count - 用
toRef(state, 'count')得到的是引用，改它就是改state.count - 模板中两者都自动解包，但逻辑层行为完全不同
