props响应式断开主因是引用未变或绕过proxy拦截：1. setup中直接解构props会丢失响应性，需用torefs；2. props赋值给data/ref后不更新，应watch监听；3. 数组/对象原地修改不触发更新，需替换引用；4. v-for中key不唯一或不响应会导致子组件复用。
Props 响应式断开，不是数据没传过去，而是子组件“看不见变化”——Vue 的响应式系统没被触发。核心在于：值变了，但引用没变；或访问路径绕过了 Proxy 拦截。下面从四个最常踩的坑切入，直击问题本质。
1. setup 中直接解构 props，响应性当场消失
这是 Vue3 最典型的“静默失效”。比如：
-
错误写法：
const { user } = props→user变成普通对象，后续父组件更新props.user，它完全无感 -
正确做法：用
toRefs(props)解构，或模板中直接写{{ props.user.name }} - 若需在逻辑中使用，推荐：
const { user } = toRefs(props)，此时user.value才是响应式源头
2. 把 props 赋给 data / ref 后就不管了
常见于想“本地化管理”的场景，例如：
-
错误写法：
data() { return { localList: this.list } }→ 初始化拷贝一次，之后父组件改this.list，localList不动如山 -
正确做法：优先直接用
props.list渲染；若必须本地维护，Vue 中用watch深监听，React 中用useEffect依赖props.list - 注意 watch 的写法：
watch(() => props.list, handler, { deep: true })，不能直接写watch(props.list, ...)
3. 数组/对象原地修改，引用纹丝不动
Vue（和 React）靠引用变化触发更新。push、splice、obj.key = val 这类操作不产生新引用，子组件收不到通知：
-
数组失效操作：
arr[0] = 'new'、arr.length = 0、arr.push(item) -
对象失效操作：
obj.newField = 'val'（字段未在 reactive 初始化时声明） -
安全写法：
arr = [...arr, newItem]、obj = { ...obj, newField: 'val' }，或用Object.assign(obj, { newField: 'val' })
4. key 缺失或不响应，导致子组件被复用
v-for 列表或动态子组件中，key 写错等于关掉了更新开关：
-
危险写法：
:key="index"→ 列表增删时 key 错位，旧组件被错误复用 -
正确写法：
:key="item.id"（确保唯一稳定） - 需要强制刷新整个子组件（如表单重置）时：
:key="forceKey"，并在父组件中更新forceKey值
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
