vue3使用watch监听props的值的注意事项及说明

在 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('触发监听');
    }
  }
);

总结

推荐方案：

• 优先使用函数形式监听，并结合 deep: true 确保深度属性变化的检测。
• 若性能敏感，可通过唯一标识或序列化优化依赖链。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论