props更新本身不直接触发副作用，而是通过子组件重新渲染激活响应式逻辑；watch、computed、effect和生命周期钩子等依赖props的响应式行为会在重渲染时执行，需注意浅响应式限制与单向数据流约束。
Vue.js 中 props 更新本身不直接触发副作用，真正起作用的是子组件因 props 变化而重新渲染，进而激活依赖该 props 的响应式逻辑——比如 watch、computed、effect 或生命周期钩子。
props 更新如何间接触发副作用
父组件修改数据 → 重渲染 → 生成新 VNode → patch 对比 → 子组件执行 render（用新 props）→ 新的响应式依赖被收集或已存在依赖被通知更新 → 副作用函数（如 watch 回调、effect、updated 钩子）执行。
关键点在于：props 是只读输入，不是被 patch 的目标；真正被响应式追踪和触发的是子组件内部对 props 的访问行为。
哪些地方会响应 props 更新
-
watch 监听：监听 props 某个字段（如
watch(() => props.id, ...)），或开启deep: true监听嵌套对象变化 -
computed 衍生状态：基于 props 计算的值（如
const fullName = computed(() => props.user?.name + props.user?.surname)），props 变则 computed 自动更新 -
setup 中的 effect：使用
effect(() => { console.log(props.count) })会自动追踪并响应 props 变更 -
生命周期钩子：
beforeUpdate和updated在每次子组件因 props 更新而重渲染时都会执行
常见陷阱与注意事项
props 默认是浅响应式，改对象内部属性（如 props.profile.name = 'new'）不会触发 watch 或 effect，除非该属性本身已被 track；若需深度响应，必须显式使用 watch(..., { deep: true }) 或把嵌套字段转为独立 ref（如 toRefs(props) 后再 computed）。
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
不要在 watch 回调里直接修改被监听的 props 字段，否则可能引发无限循环；如确需同步状态，应通过 $emit 通知父组件更新，保持单向数据流。
异步更新时机与 $nextTick
props 更新后 DOM 不会立刻刷新，而是批量延迟到下一个微任务。如果副作用需要操作更新后的 DOM（例如聚焦某个 input），应在 updated 钩子或 nextTick 中进行：
例如：this.$nextTick(() => this.$refs.input.focus())（Vue 2）或 await nextTick()（Vue 3）
注意：beforeUpdate 中 props 已是新值，但 DOM 还没变；updated 中 DOM 已就绪，适合做真实 DOM 操作。
