父组件数据未真正更新是子组件props不更新的最常见原因。需检查绑定变量是否被赋新值、异步后是否遗漏赋值、props声明与传递是否拼写/大小写/命名规范匹配、v-bind是否漏冒号、避免data中复制props导致响应链断裂、处理对象数组深层变更时用$set或确保reactive/ref包裹。
确认父组件数据是否真正更新
子组件 props 不更新，最常被忽略的是父组件本身的数据没变。检查父组件中用于绑定 props 的变量，是否在逻辑中确实被赋了新值；尤其注意异步操作（如 API 请求）后是否遗漏了赋值语句。例如：axios.then 回调里没写 this.list = res.data，或用了 const 临时变量却没更新响应式源。可在父组件中加 console.log 或 Vue Devtools 查看该变量实时值。
检查 props 声明与传递是否匹配
拼写错误、大小写不一致、驼峰命名与 kebab-case 混用都可能导致 props 接收失败：
- 子组件 props 定义为 userName，父组件却传
:username="name"→ ❌ - 子组件 props 类型设为 Number，父组件却传字符串
:count="'5'"→ Vue 警告且可能转为 NaN - 使用 v-bind 动态绑定时漏掉冒号，写成
user-data="obj"→ 变成静态字符串而非响应式绑定
避免在子组件 data 中复制 props 值
如果在子组件 data() 里做了类似 num: this.$props.count 的初始化，那后续父组件更新 count，子组件的 num 不会同步。这是典型“断开响应链”操作。应改为：
- 直接在模板中用
{{ $props.count }}或{{ count }}（解构后） - 需要加工时用 computed：比如
doubleCount() { return this.count * 2 } - 确需本地状态时，用 watch 监听 props 变化并同步更新本地变量
处理对象/数组深层变更
Vue 默认只监听对象/数组的引用变化。若父组件只是修改了对象内部字段（如 user.profile.name = 'Tom'），而 user 引用未变，子组件不会响应：
立即学习“前端免费学习笔记（深入）”；
- Vue 2：用
this.$set(this.user, 'profile', newProfile)或Vue.set() - Vue 3（Options API）：同上；Composition API 中确保原始数据是
reactive或ref包裹的 - 初始化结构要完整：避免
user: { profile: null }，改用user: { profile: {} }
