Props 不能直接解构赋值，因其会切断与 Vue 响应式系统的连接，导致值无法响应更新；应始终通过 props.xxx 访问，或用 toRefs 保持响应性。
Props 不能直接解构赋值，根本原因在于：解构操作会切断变量与 Vue 响应式系统的连接。Vue 的响应式依赖对 props.xxx 这类属性访问的实时劫持（Proxy 拦截 get），而解构只是做了一次性取值，得到的是普通变量——它既不会随父组件更新而变化，修改它也不会触发视图刷新。
解构破坏响应式的典型表现
比如在 setup 中写：
-
const { title, count } = props→title变成字符串，count变成数字，后续父组件改title，子组件里这个局部变量毫无反应 -
const [a, b] = props.list→a和b是快照值，哪怕props.list被 push 新项，它们也不会变 -
watch(() => msg, ...)如果msg是解构出来的，watch 就永远监听不到变化，因为它的依赖源头已丢失
安全访问 Props 的推荐方式
最稳妥的做法是始终通过 props.xxx 访问。Vue 会在每次读取时自动建立响应式依赖链：
- 模板中直接用
{{ props.title }}或v-bind="props"（需子组件 props 定义匹配） - 逻辑中写
props.count + 1、props.user.name，不提前拆开 - 需要简化书写时，用
computed封装：const title = computed(() => props.title)，它会持续追踪并更新
真要解构？用 toRefs 保持响应性
若代码可读性或函数传参确实需要结构化变量，必须借助 toRefs：
import { toRefs } from 'vue'-
const { title, count } = toRefs(props)→ 得到的是 ref 对象，模板中可直接用{{ title }}，逻辑中需title.value - 单个属性也可用
toRef(props, 'title')，更轻量
v-model 场景特别注意
别写 const { modelValue } = props 然后 v-model="modelValue" —— 这既不响应更新，也违反单向数据流。正确做法是：
- 模板中用
v-model:title="props.title"（对应update:title事件） - 或手动实现：绑定
:value="props.title"+@input="$emit('update:title', $event)"
