Props变更未触发watch，主因是监听对象“看似变化实则未变”，尤其引用类型；解构props会切断响应式，需直接监听props属性或用toRefs；父组件传相同引用、非响应式对象或直接修改数组索引均导致失效；应确保props响应式、正确监听并启用immediate。
Props 变更没触发 watch，绝大多数情况不是 Vue 失效，而是你监听的对象“看起来变了，其实没变”——尤其是对象、数组这类引用类型。Vue 的响应式系统靠依赖追踪工作，它只在响应式数据的属性被真正读取、且后续值发生有效变化时才触发更新。下面几个关键点，直击高频踩坑现场。
一、解构 props 会切断响应式链接
这是最隐蔽也最常犯的错误。你在 setup 中写：
const { timeParam } = defineProps<{ timeParam: Record<string, string> }>();<br>watch(timeParam, () => { /* 不会执行 */ });
问题在于：timeParam 是一个响应式代理（Proxy），但解构后得到的 timeParam 是普通 JS 对象，失去了响应性。即使父组件传的是 ref 或 reactive，解构即“脱敏”。
✅ 正确做法：始终监听原始 props 属性本身，或用 toRefs + 显式保留响应式（仅限 shallow ref 场景）：
- 直接监听
props.timeParam（推荐） - 若需解构，用
const props = defineProps(...)，再watch(() => props.timeParam, ...) - 对
ref类型 prop，可watch(timeParam, ...)；但对Object类型 prop，必须用函数包装形式
二、“值没变”比“没监听”更难察觉
父组件反复赋同一个对象引用，watch 就不会触发——Vue 做的是浅层引用比较或基本类型值比较，不深究内容是否逻辑等价。
例如：
❌ 父组件这样传，子组件 watch 永远沉默const config = { a: 1, b: 2 };<br><Child :options="config" /><br>// 后续又传一次 config —— 引用相同，无变化
✅ 解决思路：
- 父组件每次传新引用：
:options="{ ...config }"或:options="JSON.parse(JSON.stringify(config))"（慎用于深层嵌套） - 用
watch(() => JSON.stringify(props.options), ...)强制比对结构（仅调试或简单场景） - 改用
watchEffect并在内部读取props.options的具体字段，让依赖自然建立
三、deep: true 不是万能钥匙
deep: true 的作用是开启对响应式对象内部属性的依赖收集，但它无法监听非响应式对象的内部变化，也无法挽救“引用未变”的情况。
典型失效场景：
- 父组件传入普通对象（非
reactive/ref），即使加deep: true，子组件也无法感知其任意属性变化 - 父组件传
computed(() => ({ x: 1 }))，每次返回新对象但结构相同，Vue 可能跳过更新（尤其配合shallowRef） - 监听数组时，
push/pop能触发，但直接arr[0] = xxx不触发（除非数组本身是reactive）
所以，先确保 props 本身是响应式的，再谈 deep 是否生效。
四、别漏掉 immediate 和组件生命周期
watch 默认只在值“变化后”触发，首次 props 值已存在，但 handler 不执行——这会让“初始化逻辑”丢失。
✅ 必加配置：
-
immediate: true：确保首次渲染时就运行一次 handler，处理初始值 - 确认子组件已挂载：如果父组件用
v-if动态控制子组件显示，而首次 props 在子组件创建前就更新了，那这次变更会被丢弃（因为没有实例可通知） - 此时可改用
v-show，或在父组件用nextTick延迟赋值，确保子组件已 ready
本质上，watch 不触发不是 bug，而是 Vue 对响应式语义的严格遵守。盯住三点：props 是否响应式、监听方式是否保留响应链、变更是否构成“有效更新”。理清这些，90% 的“不触发”问题就迎刃而解。
