Vue 3 中 reactive 对象解构后丢失响应式,除了 toRefs 还能怎么处理?
在 Vue 3 组合式 API 的日常开发里,从 reactive 创建的响应式对象上解构属性,再用在模板或计算属性中,更新时页面没反应,这几乎每个项目都会踩一次。原因不复杂:reactive 返回的是 Proxy,响应式跟踪发生在属性访问阶段,而解构相当于提前把属性值读出来赋给普通变量,后续变量变化自然和原对象脱钩。官方给出的标准解是 toRefs,但在真实业务里,尤其是组合函数封装、Pinia store 或者需要部分字段透传的场景,toRefs 并不是唯一选择,有时也不是最顺手的那个。下面结合几个实际代码片段,把这个问题拆开看,并给出几种能在不同场景落地的处理方式。