子组件视图不更新是因响应式未触发，主因包括：1.原地修改数组/对象未更新引用；2.props赋值data后不同步；3.computed或模板变量名错误；4.key缺失或不响应；5.初始空数据导致提前渲染。
父组件传了新数据，子组件视图却没变——这不是 bug，而是响应式机制没被正确触发。核心问题往往出在“值变了但引用没变”或“子组件没监听到变化”。下面从五个高频场景切入，帮你快速定位、对症解决。
1. 父组件原地修改数组/对象，没创建新引用
Vue 和 React 都依赖引用变化来触发更新。如果父组件用 push、pop、splice（非返回新数组）、直接赋值 obj.key = val 等方式修改数据，子组件接收的 props 引用仍是原来的，框架无法感知变更。
-
Vue 正确做法：用展开运算符或
this.$set替换整个数组/对象，例如：this.list = [...this.list, newItem]或this.$set(this.obj, 'name', 'newName') -
React 正确做法：始终返回新引用，如
setList(prev => [...prev, newItem])，避免list.push(item)
2. 子组件把 props 赋值给 data 或 useState 后不再同步
常见写法：data() { return { localList: this.list } } ——这仅在初始化时拷贝一次。后续父组件更新 this.list，localList 不会自动跟着变。
- 推荐直接使用
props.list渲染，不额外存副本 - 若必须本地管理，Vue 中用
watch深监听：watch: { list: { handler() { this.localList = [...this.list] }, deep: true } } - React 中用
useEffect响应 props 变化：useEffect(() => { setLocalList(props.list) }, [props.list])
3. 子组件用了 computed 但没正确返回，或模板里误用了局部变量
比如声明了 computed: { displayedList() { return this.list.filter(...); } }，却在模板中写了 {{ localList }}（未定义）或 {{ list }}（未声明为 prop）。
- 检查子组件
props是否正确定义了接收字段，名称要完全一致 - 确保模板中使用的变量名与
props、computed或watch更新后的变量名严格对应 - Vue 中可临时加
{{ JSON.stringify(list) }}在模板验证是否收到最新值
4. key 属性缺失或未随数据更新而变化
当子组件是 v-for 渲染的列表项，或需要强制重载时，缺少唯一且响应式的 key 会导致复用旧实例，跳过更新逻辑。
- 列表渲染务必用稳定唯一 key，如
:key="item.id"，避免用:key="index" - 若需整体刷新子组件（如表单重置），可在父组件绑定动态 key：
:key="list.length + Date.now()"或:key="forceUpdateKey"，数据更新时改变该 key
5. 数据初始为空，子组件提前渲染导致“假不更新”
父组件异步加载数据，初始传入空数组 [] 或 null，子组件已按空状态渲染完毕。后续数据到来，但子组件因条件判断或生命周期未覆盖，视图卡在初始态。
- 在父组件加
v-if="list && list.length"控制子组件是否挂载，等数据就绪再渲染 - 子组件内用
v-if="list?.length"包裹内容区域，避免空数据占位 - 配合 loading 状态提示用户等待，提升体验
