Vue 3 中 reactive 对象解构后丢失响应式,用 toRefs 不如用这个模式
在 Vue 3 组合式 API 里,把 reactive 创建的对象解构到模板或子组件时,原始值的响应性会断掉。这个坑在表单编辑、弹窗复用、列表项抽取组件时特别常见:父组件传一个 user 对象,子组件 const { name, age } = props.user,改 name 时视图不动,因为解构出来的只是当次求值的结果。很多人第一反应是套 toRefs,但 toRefs 只解决顶层属性的引用问题,遇到嵌套对象、数组、或者需要把整个对象传给子组件再修改的场景,依然要手动铺开。文章会从 Proxy 的依赖收集机制讲清楚为什么解构会丢响应式,对比 toRefs、toRef、直接传 react...