Vue 3 中 reactive 对象解构丢失响应性的真实原因与替代写法
在 Vue 3 项目里,不少人在组合式 API 中写 const { count } = reactive({ count: 0 }) 之后,发现模板里 count 永远不会更新。这个问题通常不是 Vue 的 bug,而是 reactive 返回的是 Proxy 对象,解构本质上就是读取属性值再赋给新变量;如果属性是原始类型,新变量拿到的是一个普通值,和原来的 Proxy 已经断开联系。模板或 computed 再访问这个普通变量时,Vue 的依赖收集不会建立到原对象上,因此更新源对象也不会触发视图。常见场景包括把 reactive 表单字段解构给子组件、从 store 中解构状态、在组合式函...