父组件数据未真正更新是子组件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 接收失败：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 子组件 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: {} }

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！