解构 reactive 变量会失去响应式，根本原因是 Proxy 代理关系被切断，值被抽离成普通数据；解构得到的是原始值或浅引用，不再经过 get/set 拦截，无法触发依赖收集与更新。
解构 reactive 变量会失去响应式，根本原因在于——Proxy 代理关系被切断，值被“抽离”成普通数据。Vue3 的响应式不是靠监听属性本身，而是靠拦截对代理对象的访问。一旦解构，你拿到的就不再是代理，而是原始值或普通对象引用。
Proxy 代理只作用于顶层对象
reactive() 返回的是一个 Proxy 实例，它只代理你传入的那个对象本身，不代理它的子属性“被单独拿出来”后的副本。比如：
const state = reactive({ user: { name: '张三', age: 25 } })
此时 state 是代理，state.user 也是代理（因为 Vue 会递归代理嵌套对象）。但一旦写：
const { user } = state
这行代码本质是：从代理对象中读取 user 属性的当前值，并赋给新变量 user。而这个“当前值”，虽然是个对象，但它不是代理对象，只是被代理过的原始对象的一个引用——它不再受 Proxy 的 get/set 拦截，也不再触发依赖收集和更新通知。
解构 = 值拷贝（对基本类型）或浅引用（对对象）
JavaScript 解构赋值不是创建响应式链接，而是执行一次属性读取 + 变量赋值。这个过程绕过了 Vue 的响应式追踪链：
- 对
number、string、boolean等基本类型：解构得到的是值拷贝，完全脱离响应式系统 - 对嵌套对象（如
user）：解构得到的是该对象在内存中的原始引用，不是它的代理，因此后续修改user.name不会触发视图更新 - 即使再解构一层：
const { name } = state.user，拿到的name就是字符串字面量，彻底“扁平化”出响应式体系
响应式依赖的是“访问路径”，不是“数据内容”
Vue3 的依赖收集发生在你通过 state.xxx 访问属性时。Proxy 的 get 拦截器在此刻执行 track()，把当前副作用（比如组件渲染函数）记为该属性的依赖。但解构后你访问的是本地变量：
const { count } = state
count++ // 修改的是局部变量，不走 state 的 set 拦截，也不触发 track/trigger
换句话说，响应式系统根本“看不见”这次修改——它没机会介入，也就无法刷新界面。
如何安全使用？关键在保持访问路径不中断
想保留响应性，就得让读写操作始终落在 reactive 代理对象上：
- ✅ 直接用
state.count、state.user.name—— 走代理路径 - ✅ 用
toRefs(state)把每个属性转成 ref，再解构：const { count, user } = toRefs(state)—— ref 有 .value 作为响应式接入点 - ✅ 对需要频繁解构的场景，优先用
ref({ ... })替代reactive({ ... })，因为 ref 的响应式封装更“抗拆解” - ❌ 避免
const { x, y } = reactive(...)后直接修改x或y
这不是 Vue 的 bug，而是 Proxy 机制的自然限制：代理不能自动延伸到任意变量名上。理解这一点，才能真正避开响应式“突然失效”的陷阱。
