Vue 3 的 reactive 对象解构后丢失响应式,除了 toRefs 还能怎么处理?
在 Vue 3 组合式 API 里,从 reactive 对象上直接解构出来的属性会失去响应式,这是很多人从选项式 API 迁移过来时踩到的坑。典型场景是父组件传递一个 reactive 对象,子组件想拆开使用其中几个字段,写成了 const { count, name } = props.state,结果模板里 count 变化时视图不更新。根本原因是 reactive 返回的是 Proxy,解构读取到的只是当前时刻的属性值,是一个普通的基础类型或对象引用,后续 Proxy 上的更新不会再通知这个已经脱离代理的变量。toRefs 是官方推荐的解法,但并不是唯一路径,不同场景下还有更贴合业务的...