Vue 3 中 reactive 对象解构后丢失响应式,如何正确处理
在 Vue 3 组合式 API 里,用 reactive 创建响应式对象后,把它整体传给模板通常没问题;但只要在 JavaScript 里解构,比如 const { count } = state,后续 count 的变化就不再触发视图更新。这个问题在实际开发中很常见:从接口拿到一组筛选条件、表单字段或分页参数,为了在方法里少写几层 state.xxx,顺手解构出来,结果点击按钮后页面没反应。根本原因在于 reactive 返回的是 Proxy,解构得到的是某一时刻的属性值,相当于把原始值复制给了变量,Proxy 的 get 拦截只发生在访问 state.count 的那一次,变量本身和响应式...