Vue.js组件通信中Props对象与数组解构赋值时的响应式保持

解构 props 会破坏响应式，因为解构出的变量脱离了 Vue 响应式系统的追踪链路；应通过 props 对象直接访问，或用 toRefs、computed 等安全方式替代。

Vue.js 中通过 props 传递数据时，使用对象或数组解构赋值本身会**破坏响应式**，因为解构出来的变量只是原始值的副本，不再与父组件的数据关联。这不是 Vue 的 bug，而是 JavaScript 解构行为的自然结果。

为什么解构 props 会丢失响应式？

Vue 的响应式系统依赖于对 对象属性访问和数组索引访问 的劫持（Vue 2 的 Object.defineProperty 或 Vue 3 的 Proxy）。一旦你用解构把某个 prop 值提取成局部变量，这个变量就脱离了响应式对象/数组的追踪链路：

• 对象解构：`const { title, count } = props` → `title` 和 `count` 是普通字符串/数字，修改它们不会触发更新，也无法响应父组件变更
• 数组解构：`const [first, second] = props.items` → `first`、`second` 是值拷贝（基本类型）或引用拷贝（对象），但不再受 `props.items` 变化影响

正确保持响应式的做法

不要直接解构 props，而应始终通过 props 对象本身访问。Vue 会自动追踪对 `props.xxx` 的读取，并在对应 prop 更新时重新求值：

• 模板中直接写 `{{ props.title }}` 或 `v-bind="props"`（注意：后者需配合接收方合理定义 props）
• 组合式 API（setup）中，用 `props.title` 而非解构后的 `title`
• 如需简化书写，可用 计算属性封装：`const title = computed(() => props.title)`，它会自动建立响应式依赖

需要解构场景下的安全替代方案

若确实需要结构化操作（比如解构 props 后传给子函数），可借助以下方式维持响应性：

立即学习“前端免费学习笔记（深入）”；

• 使用 toRefs（Vue 3）：`const { title, count } = toRefs(props)` → 返回的是 ref 对象，解构后仍可响应式读写（注意：赋值需 `.value`）
• 使用 reactive 包裹（慎用）：`const localProps = reactive({ ...props })` → 仅适用于 props 全部为浅层响应式且无深层嵌套，且不能同步父组件更新（单向数据流原则）
• 函数式封装：将逻辑封装为接受 `props` 对象的函数，在内部直接访问 `props.xxx`，避免提前解构

特别提醒：v-model 与解构的误区

不要对 props 做类似 `const { modelValue } = props` 然后 `v-model="modelValue"` —— 这既不响应更新，也违反单向数据流。正确做法是用 `v-model:xxx="props.xxx"` 或按 Vue 官方推荐方式实现自定义 v-model（emit update 事件）。