解构 reactive 对象会导致响应式丢失，因为解构出的变量脱离 proxy 代理；必须用 torefs 将属性转为 ref 才能保持响应式同步。
直接解构 reactive 对象会导致响应式丢失，因为解构出来的变量脱离了 Proxy 代理的追踪范围。要保持响应式，必须用 toRefs 将每个属性转为独立的 ref。
为什么解构会断开响应式
Vue 3 的响应式基于 Proxy，它只拦截对整个 reactive 对象的操作。一旦你写 const { count } = state，得到的是一个普通数值或普通引用，不再是响应式连接的一部分。后续修改 count++ 不会触发视图更新，也不会同步到 state.count。
正确做法：用 toRefs 包裹再解构
调用 toRefs 把 reactive 对象的所有属性转成 ref，再解构。这些 ref 与原属性保持双向同步。
- 必须先 import：
import { reactive, toRefs } from 'vue' - 创建 reactive 对象后，立即传给
toRefs - 解构得到的是 ref，读写需通过
.value（模板中可省略）
示例：
const { count, name } = toRefs(state);
// 修改时
count.value++; // ✅ 触发更新，state.count 同步变化
name.value = 'Bob'; // ✅ 同样生效
常见组合场景处理
实际开发中常遇到多个 reactive 对象或混合逻辑，注意统一处理方式：
- 多个状态对象：分别调用
toRefs，避免混在一起解构 - 需要合并暴露：先
toRefs(user)和toRefs(config)，再用展开运算符{...toRefs(user), ...toRefs(config)} - 函数或计算属性：无需 toRefs，直接返回即可
toRef 和 toRefs 的区别
两者用途不同，选错会影响代码清晰度和维护性：
-
toRefs(obj)：适用于批量解构整个 reactive 对象，要求obj必须是响应式对象 -
toRef(obj, 'key')：适合只提取单个字段，比如要单独 watch 某个属性，或属性名动态生成
非响应式对象传给 toRefs 不报错，但返回空对象；而 toRef 即使源对象不响应，也能创建指向该属性的 ref（但不会自动同步变化）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
