关于vue3中如果想要用watch监听props的值的的注意事项-CSDN博客

本文链接：https://blog.csdn.net/2301_81854535/article/details/147537737

在 Vue 的响应式系统中，直接监听 props.optionData 并启用 deep: true 仍失效的原因，主要与响应式代理的复用机制和深度监听的实现逻辑有关。以下是具体分析：

一、核心原因：响应式代理的复用

父组件传递新对象的代理处理
父组件通过 computed 生成的 optionData 每次都是新对象，但 Vue 在子组件中接收 props.optionData 时会自动将其转换为响应式代理对象（Proxy）。
• 若父组件传递的新对象与原代理对象的结构相同，Vue 可能会复用已有的代理实例，导致引用地址未发生明显变化。

• 此时，直接监听 props.optionData 实际监听的是代理对象的引用地址，而非父组件原始对象的地址。
deep: true 的局限性
• deep: true 的作用是递归监听对象所有层级的属性变化，但前提是代理对象本身的引用地址已被正确追踪。

• 若代理对象的引用地址未变（被复用），即使内部属性发生变化，Vue 也会认为 props.optionData 未发生“顶层”变化，从而跳过深度遍历。

二、实验验证与现象解释

父组件代码示例

// 父组件每次生成新对象
const optionData = computed(() => ({
  title: 'Weekly Sales',
  xAxis: { data: categories.value },
  series: [{ data: values.value }]
}));

子组件监听逻辑

// 直接监听 props.optionData（失效）
watch(
  props.optionData,
  (newVal) => {
    console.log('触发监听');
  },
  { deep: true } // 仍不触发
);

现象解释
• 引用地址未变：Vue 复用代理对象，导致 props.optionData 的引用地址在子组件中未变化，因此 watch 认为未发生“顶层”变化，跳过深度检查。

• 依赖收集失败：deep: true 需要访问对象的所有属性以建立依赖关系，但若代理对象未触发属性访问（如未实际使用嵌套属性），依赖链可能不完整。

三、解决方案

改用函数形式监听
通过函数返回 props.optionData，强制 Vue 在每次依赖收集时重新获取原始值，绕过代理复用机制：

watch(
  () => props.optionData, // 动态获取最新值
  (newVal) => {
    console.log('触发监听');
  },
  { deep: true }
);

强制生成唯一标识
在父组件中为对象添加唯一键（如时间戳），确保每次生成的新对象结构不同，避免代理复用：

const optionData = computed(() => ({
  ...config,
  _key: Date.now() // 破坏结构一致性
}));

显式触发引用变化
在子组件中手动比较新旧值的序列化结果，强制触发更新：

watch(
  () => JSON.stringify(props.optionData),
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      console.log('触发监听');
    }
  }
);

四、总结

场景	直接监听 `props.optionData`	函数形式 `() => props.optionData`
代理复用	可能复用代理，引用地址未变	动态获取最新值，绕过代理复用
`deep: true` 生效条件	依赖代理地址变化	直接追踪原始对象变化
性能开销	低（浅层监听）	高（深度递归 + 动态依赖收集）