解构会丢失响应式，因获取的是值副本而非代理引用；正确做法是用 torefs 将响应式属性转为 ref，通过 .value 保持响应式连接。

因为解构操作拿到的是属性的“值副本”，不是对响应式对象属性的“活链接”。Vue 3 的 reactive 依赖 Proxy 拦截对象本身，而解构出来的变量脱离了 Proxy 的监控范围。

解构 = 值拷贝，不是引用绑定

当你写：

const state = reactive({ count: 0 })
const { count } = state

JavaScript 解构会执行类似这样的逻辑：

const count = state.count // 触发一次 get，拿到数值 0
// 但之后 count 就只是普通变量 0，和 state.count 再无关联

后续修改 count = 1，只是改了局部变量，不会触发 state 的 set 拦截，视图自然不更新。

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

响应式靠 Proxy，不是靠变量名

• reactive() 返回的是一个代理对象（Proxy），所有响应式能力都绑定在这个代理实例上
• 代理只监听对这个对象及其已有属性的读写，不监听“谁在用它的属性值”
• 解构后的新变量（如 count）指向的是原始值（比如数字 0），它既不是 Proxy，也没有 getter/setter

正确做法：用 toRefs 保持连接

toRefs() 不是复制值，而是为每个属性创建一个 ref，该 ref 的 .value 通过 getter/setter 始终读写源对象对应属性：

const { count } = toRefs(state)
// count 是 ref，count.value 读写等价于 state.count

这样解构出的变量仍能触发响应式更新——模板里直接用 {{ count }}，脚本里用 count.value++。

顺便注意：嵌套对象也一样脆弱

即使没解构，直接把嵌套对象赋给新变量也会断链：

const user = reactive({ profile: { name: 'Alice' } })
const profile = user.profile // ❌ 拿到的是普通对象，修改 profile.name 不保证更新视图

需要保持响应式，应始终通过原始响应式对象访问，或对嵌套层也用 toRefs / toRef 包装。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！