props更新仅在模板引用且变更可被追踪时触发重新渲染，依次执行beforeupdate和updated钩子；未引用、非响应式修改、字面量传递或解构丢失响应性均导致不更新。
Vue 组件中 props 的更新不是“只要父组件一改，子组件就无条件重渲染”，而是有一套明确的响应式触发逻辑。关键在于：props 是否被模板使用、数据类型是否响应、以及修改方式是否被 Vue 追踪到。
props 更新会触发哪些生命周期
当 props 确实发生**可被侦测的变更**并导致子组件重新渲染时，会依次执行：
- beforeUpdate：在虚拟 DOM 重新渲染前调用，此时 data 和 props 已更新，但 DOM 还未更新；
- updated：整个组件（含所有子组件）完成 DOM 更新后调用，适合做 DOM 后续操作（如 focus、第三方库重绘）；
注意：render 函数本身不是生命周期钩子，但每次更新都会重新执行；beforeMount 和 mounted 只在首次挂载时运行，不参与后续 props 更新流程。
哪些 props 变更真正触发更新
不是所有 props 赋值都会引起子组件更新。是否触发，取决于两个核心条件：
-
是否在模板中被引用：未出现在模板里的响应式 prop（如
{{ msg }}或v-if="msg"），即使值变了，也不会进入依赖收集，不会触发更新； -
是否属于 Vue 能追踪的响应式变更：
- 基础类型（String/Number/Boolean）：值变化即触发；
- Object/Array 类型：
- 替换整个对象（
this.obj = { a: 1 }）→ 触发； - 仅修改属性（
this.obj.a = 2）→ 仅当obj.a在模板中被使用才触发； - 数组索引赋值（
arr[0] = 'x'）或length修改 → 不触发，需用Vue.set（Vue 2）或ref/reactive配合正确写法（Vue 3）；
- 替换整个对象（
props 更新不生效的常见原因
以下情况看似改了 props，但子组件毫无反应：
- 父组件传递的是字面量（如
:count="5"），而父组件自身没变化 → 子组件收不到新值； - 子组件直接修改 props（如
this.msg = 'new'），Vue 会警告且不响应（违反单向数据流）； - 传递的是非响应式对象（如通过
Object.freeze冻结，或未经过reactive包裹的普通对象）； - 在
setup中用toRefs(props)解构后，再修改解构变量 → 原始 props 未变，不触发更新； - 使用
v-if控制子组件显示，且切换过程中组件被销毁重建 → 此时走的是挂载流程（created→mounted），而非更新流程。
如何确保 props 变更可靠触发更新
推荐做法是兼顾可读性与响应式保障：
- 在子组件中用
watch显式监听关键 props，尤其用于副作用（如请求、动画、状态同步）； - 对深层对象属性，用计算属性（
computed）包装后再模板使用，避免直接访问未响应的嵌套路径； - Vue 3 中优先使用
defineProps+ 类型声明，配合watch或onUpdated钩子； - 避免在
data或setup初始值中直接赋值props.xxx（浅拷贝陷阱），如需本地副本，用ref(toRaw(props).xxx)或深克隆； - 调试时可用
console.log打印props并观察其__v_isRef或__ob__属性，确认是否为响应式对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
