toRef 和 toRefs 是解决 Vue 3 响应式对象解构后失去响应性的核心方法：toRef 为单个属性创建响应式引用，toRefs 批量转换 reactive 对象所有顶层属性为 ref 以支持安全解构。
Vue 3 中使用 toRef 和 toRefs 是解决“响应式对象解构后失去响应性”问题的核心技巧。直接对 reactive 或 ref 对象做结构赋值（如 const { name, age } = user），得到的变量会脱离响应式系统，后续修改不会触发视图更新 —— toRefs 就是为此而生。
为什么解构会丢失响应性？
因为 JavaScript 解构本质是“值拷贝”或“引用拷贝”，但不是“响应式引用”。比如：
const state = reactive({ count: 0 });<br>const { count } = state; // ❌ count 是普通数字，非 ref，不响应
此时 count++ 不会触发更新，state.count++ 才会。要让解构后的变量仍可响应，必须用 toRef 或 toRefs 显式创建响应式引用。
立即学习“前端免费学习笔记（深入）”；
toRef：为单个属性创建响应式引用
toRef 适用于从响应式对象中精准提取某一个属性，并保持其响应性，尤其适合属性名动态或不确定时：
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 接收响应式对象和属性名字符串，返回一个
ref对象 - 该
ref的.value始终与源对象属性同步（双向） - 即使源属性后续被添加或删除，
toRef也能按需响应（配合proxy机制）
示例：
const state = reactive({ name: 'Alice', age: 25 });<br>const nameRef = toRef(state, 'name');<br>nameRef.value = 'Bob'; // ✅ 触发视图更新，state.name 也变为 'Bob'
toRefs：批量转换所有属性为 ref，安全解构
当需要解构整个响应式对象时，toRefs 是最常用、最推荐的方式：
- 将
reactive对象的每一个顶层属性都转为独立的ref - 返回一个普通对象，其每个 key 都对应一个 ref，可安全解构使用
- 解构后的变量（如
name、age）仍是 ref，需通过.value读写（在模板中可省略）
示例：
const state = reactive({ name: 'Alice', age: 25 });<br>const { name, age } = toRefs(state); // ✅ 安全解构<br>name.value = 'Tom'; // ✅ 响应式更新<br>{{ name }} 在模板中直接写即可，无需 .value
常见误区与注意事项
-
toRefs只作用于reactive对象，不能用于普通对象或ref包裹的对象 - 不要对
ref对象本身调用toRefs—— 它已经是响应式引用了 - 解构后若想在
setup中直接赋值（如name = ref('New')），会切断与原对象的连接，应始终操作.value - 在组合式函数中返回多个响应式字段时，统一用
toRefs包裹再解构，能提升消费端的可用性
