最直接可靠的方式是用 watch 监听响应式 props：Vue 3 需用 toRef 或 toRefs 保持响应性，不可直接监听 props 对象；Vue 2 可直接在 watch 选项中监听，对象或数组需 deep: true 但注意性能。

子组件监听 Props 变化，最直接可靠的方式是用 watch 监听响应式 props。Vue 3 的 setup 中需配合 toRef 或 toRefs 保持响应性；Vue 2 则可直接在 watch 选项中监听 prop 字段。

Vue 3 中 watch props 的正确写法

Props 默认是只读的响应式对象，不能直接传给 watch（否则会丢失响应性）。必须先解构为响应式引用：

• 使用 toRef(props, 'xxx') 创建单个 prop 的响应式引用，再监听它
• 若需监听多个 prop，可用 toRefs(props) 批量转换，然后分别 watch
• 注意：不要对整个 props 对象做深度 watch，既低效又可能触发不必要的更新

示例：

const countRef = toRef(props, 'count');
watch(countRef, (newVal, oldVal) => {
  if (newVal !== oldVal) doSomething();
});

Vue 2 中 watch props 的常见方式

Vue 2 的 props 是响应式属性，可直接在 watch 选项中监听：

• 监听简单类型 prop：直接写属性名，如 count(newVal, oldVal)
• 监听对象或数组且需检测内部变化：启用 deep: true，但注意性能开销
• 监听前建议加守卫，比如 if (newVal === undefined) return，避免初始化时误触发

避免常见陷阱：什么时候不该用 watch？

不是所有 prop 变化都需要副作用逻辑：

• 仅用于渲染？直接在模板里用即可，无需 watch
• 变化后要派发事件或调用 API？watch 合适，但记得加防抖或节流（尤其输入类 prop）
• prop 是复杂对象且频繁修改深层字段？考虑用 computed 派生状态，比 deep watch 更可控

进阶技巧：结合 onBeforeUpdate 实现精准时机控制

某些联动逻辑需要确保 DOM 更新完成后再执行（比如操作 ref 元素），这时 watch + onBeforeUpdate 或 nextTick 更稳妥：

• watch 触发后，用 nextTick(() => {...}) 延迟到 DOM 渲染后执行
• 若涉及多次 prop 更新合并处理，可在 onBeforeUpdate 中统一响应，减少重复操作