uniapp中父组件修改props，子组件watch为何不触发？

Question

在 UniApp 中，父组件修改 props 后子组件的 `watch` 未触发，常见原因有三：一是 props 被直接赋值为基本类型（如字符串、数字）且父组件未响应式更新（如用 `let` 声明后直接修改，未通过 `this.xxx = newValue` 触发 Vue 响应式）；二是子组件 watch 未正确监听 props 的深层变化（如对象/数组），且未设置 `deep: true` 或使用计算属性中转；三是父子组件间存在 props 单向数据流误解——若子组件意外对 props 进行了**直接赋值修改**（如 `this.myProp = 'xxx'`），Vue 会警告并忽略，导致后续 watch 失效。此外，H5 端与小程序端对 `watch` 的初始化时机（如 `immediate: true` 是否生效）也存在细微差异。建议统一使用 `defineProps` + `watch(() => props.xxx)`（Vue3 setup 语法）或 `watch: { myProp: { handler() {}, deep: true } }`（Vue2 选项式），并确保父组件数据始终通过响应式方式变更。

Answer 1

```html

一、现象层：Watch 未触发的典型表现与初步诊断

在 UniApp 多端项目中，开发者常遇到子组件 watch 对 props 变更“静默失灵”的问题：父组件已更新数据，控制台无报错，但子组件的 watch 回调从未执行。该现象在 H5 端偶现，在微信小程序/支付宝小程序端复现率更高——尤其当 props 为对象或首次挂载后首次变更时。可通过 console.log('props changed:', props.xxx) 在 onUpdated 或 watchEffect 中交叉验证，确认是否为响应式失效而非逻辑遗漏。

二、机制层：Vue 响应式系统在 UniApp 中的差异化落地

• Vue2（Options API）：依赖 Object.defineProperty，对初始不存在的属性或数组索引赋值不响应；watch: { prop: { handler, deep: true } } 是显式监听深层变化的唯一可靠方式。
• Vue3（Composition API）：基于 Proxy，支持动态属性新增，但 defineProps 返回的是只读代理（readonly），直接赋值会触发 Set operation on key "xxx" failed: target is readonly 警告并静默失败。
• UniApp 特殊约束：小程序平台运行时无法动态拦截 Object.defineProperty 的 setter（如某些低端安卓 WebView），导致部分响应式更新丢失；H5 端则因 Vue3 的 immediate: true 在 setup() 执行时 props 尚未完成初始化，造成首次 watch 不触发。

三、根因层：三大高频陷阱深度拆解

类别	错误代码示例	根本原因	UniApp 平台差异
❌ 非响应式父态	let title = 'old'; title = 'new'; // 未绑定 this	变量脱离 Vue 实例上下文，变更不触发依赖收集	H5 与小程序均失效，但小程序控制台警告更隐蔽
❌ 浅监听对象	watch(() => props.config, h => {...}) // 未 deep	Proxy 拦截仅到第一层，内部属性变更不触发回调	微信小程序中 deep: true 在 Vue3 下需配合 shallowRef + triggerRef 才稳定
❌ 反向污染 props	this.user = { ...this.user, name: 'x' } // 直接改 props 引用	破坏单向数据流，Vue 抛出 warning 并冻结后续响应链	支付宝小程序会强制清空 watch 订阅队列，导致后续所有 props 更新失效

四、方案层：跨平台鲁棒性实践策略

推荐采用「防御式响应式」设计模式：

1. 父组件始终使用 ref/reactive 声明状态，并通过 emit 触发更新（避免直接修改 prop）；
2. 子组件统一使用 defineProps + watch(() => props.xxx, ...)，对对象/数组必须显式 { deep: true, immediate: true }；
3. 关键业务场景增加计算属性中转层：const normalizedData = computed(() => JSON.parse(JSON.stringify(props.data)))，规避 Proxy 深层监听不确定性；
4. 多端兼容兜底：在 onMounted 后手动调用一次 watch 回调，模拟 immediate 行为。

五、验证层：可落地的调试流程图

graph TD
  A[父组件更新数据] --> B{是否通过 ref/reactive/this.xxx 修改？}
  B -- 否 --> C[添加 console.warn('非响应式更新！')]
  B -- 是 --> D{子组件 watch 是否配置 deep:true？}
  D -- 否且为对象 --> E[强制 deep:true + immediate:true]
  D -- 是 --> F{是否在 setup 中直接赋值 props？}
  F -- 是 --> G[移除 this.xxx = ... 改为 emit]
  F -- 否 --> H[检查 UniApp 平台版本：HBuilderX ≥ 4.22]
  H --> I[验证小程序基础库版本 ≥ 2.25.0]
  I --> J[通过 uni.getSystemInfoSync().platform 切换日志策略]

六、进阶层：面向未来的架构建议

对于 5 年以上经验的工程师，建议在大型 UniApp 工程中引入「响应式契约协议」：

• 定义 PropContract<T> 类型接口，强制要求每个 props 字段标注 readonly / deepWatchable 元信息；
• 构建 ESLint 插件规则 uniapp/no-direct-prop-mutation，静态拦截 this.$props.xxx = 类写法；
• 封装 usePropWatcher 组合式函数，自动处理 deep + immediate + 平台适配逻辑，暴露 forceUpdate 接口应对极端 case。

```