解构 props 会丢失响应式，因为解构赋值仅获取一次性快照，脱离 proxy 代理导致依赖无法追踪；而 torefs 将每个 prop 转为独立 ref，使解构后仍保持响应式。
解构 props 会丢失响应式，根本原因在于 Vue 的响应式系统无法追踪“脱离上下文”的值。props 本身是响应式代理对象（Vue 3 用 Proxy），但一旦执行 const { title } = props，JavaScript 就把 title 当作普通变量赋值——它只是那一刻的快照，和原始响应式数据彻底断开连接。后续父组件更新 props.title，这个局部变量不会同步，视图自然不刷新。
为什么点访问能保持响应式，解构却不行？
Vue 的响应式依赖“读取时收集依赖、写入时触发更新”。每次你写 props.title，Proxy 的 get 拦截器就会被触发，从而记录当前副作用（比如模板渲染）对 title 的依赖。而解构是一次性读取并赋值，之后所有操作都发生在普通变量上，Proxy 完全感知不到。
- ✅
props.title：持续走代理，可被追踪 - ❌
const { title } = props：只读一次，后续操作与代理无关
toRefs 是怎么让解构“变安全”的？
toRefs 不是魔法，它是把 props 对象里每个属性都包装成一个独立的 ref。每个 ref 都带 .value，内部有自己完整的依赖收集系统。所以解构出来的不再是原始值，而是响应式引用。
-
toRefs(props)返回类似{ title: ref('xxx'), count: ref(0) } -
const { title } = toRefs(props)→title是一个ref，不是字符串 - 在模板中直接写
{{ title }}，Vue 会自动读取title.value并建立依赖
手把手正确使用 toRefs
注意两个关键点：必须作用于 props 本体，且需配合 defineProps 声明方式使用：
- 先用
defineProps显式声明接收哪些 prop，例如：const props = defineProps(['title', 'count']) - 立刻调用
toRefs(props)，再解构：const { title, count } = toRefs(props) - 如果要解构嵌套对象（如
props.user.name），不能直接toRefs(props.user)（因为props.user往往不是响应式对象），应先用reactive包裹再toRefs，或改用computed封装
其他安全替代方案
并非只有 toRefs 一条路。根据场景灵活选择：
- 单个属性常用
toRef(props, 'title')，返回单个ref，更轻量 - 从 Pinia store 解构状态，必须用
storeToRefs(store)，原理一致 - 若只是读取、不需频繁解构，直接写
props.title最简洁，无额外开销 - 需要派生计算（如格式化、过滤），优先用
computed(() => props.title.toUpperCase())，天然响应式
响应式不是凭空存在的特性，它严格依赖 Vue 对数据访问路径的控制。理解这一点，就能避开绝大多数“值变了但界面不动”的陷阱。
