解构后ref仍响应但需.value操作，reactive解构会丢失响应式；toRefs可安全解构reactive对象，展开运算符均导致失响应；推荐统一用toRefs处理解构。
解构后是否保留响应式
ref 解构后仍可保持响应性，但需通过 .value 操作。例如：
const countRef = ref(0);
const { value } = countRef; // ✅ 解构出 value，value++ 依然触发更新
而直接解构原始值（如 const { value: v } = countRef）得到的 v 是普通数字，修改它不会影响响应式系统。
reactive 解构会丢失响应式
reactive 返回的是一个代理对象，直接解构属性会脱离 Proxy 控制：
const state = reactive({ count: 0 });
const { count } = state; // ❌ count 是普通数字，count++ 不触发更新
必须用 toRefs 转换才能安全解构：
const { count } = toRefs(state); // ✅ count 是 ref，需用 count.value 访问
展开运算符（...）的行为差异
对 ref 使用展开，实际展开的是其内部的 .value（若为对象）：
const objRef = ref({ a: 1 });
const newObj = { ...objRef }; // 等价于 { ...objRef.value } → 普通对象，无响应式
对 reactive 使用展开，同样得到普通对象：
const state = reactive({ a: 1 });
const plain = { ...state }; // ❌ 展开后失去代理，修改 plain.a 不更新视图
推荐的解构写法
统一使用 toRefs 处理 reactive 解构：
const state = reactive({ name: 'Alice', age: 25 });
const { name, age } = toRefs(state); // 各自是 ref，模板中可直接 {{ name }}，脚本中用 name.value
ref 类型变量若需解构多个字段，建议保持 .value 访问习惯，或用 toRefs 包一层（如 toRefs({ count: countRef })），避免混用风格。
