vue3中props传值watch监听不到的解决办法

在Vue 3中，如果你在子组件中使用props接收父组件传递的值，并且使用watch监听props的变化，但是发现watch无法监听到props的变化，可能是因为Vue 3中的props默认是不可变的。

解决这个问题的方法是，将props声明为响应式的，可以通过使用`toRef`或`toRefs`来实现。

1. 使用toRef:

import { toRef } from 'vue';

// 在子组件中将props声明为响应式
props: {
  propA: String
},
setup(props) {
  const propARef = toRef(props, 'propA');

  // 使用watch监听props的变化
  watch(propARef, (newValue, oldValue) => {
    // 处理props变化的逻辑
  });

  // 其他代码...
}

2. 使用toRefs:

import { toRefs } from 'vue';

// 在子组件中将props声明为响应式
props: {
  propA: String
},
setup(props) {
  const { propA } = toRefs(props);

  // 使用watch监听props的变化
  watch(propA, (newValue, oldValue) => {
    // 处理props变化的逻辑
  });

  // 其他代码...
}

通过将props声明为响应式，你可以确保watch能够正确地监听到props的变化。希望这个解决方法对你有帮助！