在Vue 3的组合式API中，可以使用watch函数来监听props的数据变化。

watch函数的第一个参数可以是一个函数，也可以是一个响应式的数据源，比如ref、reactive等。

使用函数作为第一个参数：

如果第一个参数是一个函数，那么该函数会在每次依赖项变化时被调用，并返回要监听的值。这样，当依赖项变化时，watch函数会自动重新运行。

<script>
import { watch, ref } from 'vue';

export default {
  props: {
    propValue: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const propValue = ref(props.propValue);

    watch(() => propValue.value, (newValue, oldValue) => {
      console.log('Props Value changed:', newValue);
    });

    return {
      propValue
    };
  }
};
</script>

使用响应式的数据源作为第一个参数：

如果第一个参数是一个响应式的数据源，那么watch函数会直接监听该数据源的变化，并在每次变化时执行回调函数。

<script>
import { watch, ref } from 'vue';

export default {
  props: {
    propValue: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const propValue = ref(props.propValue);

    watch(propValue, (newValue, oldValue) => {
      console.log('Props Value changed:', newValue);
    });

    return {
      propValue
    };
  }
};
</script>

两种方式的区别：

1. 函数作为第一个参数：

• 函数会在每次依赖项变化时被调用，并返回要监听的值。
• 当依赖项变化时，watch函数会自动重新运行该函数，并比较返回的值与上一次的值，以确定是否执行回调函数。
• 适用于在计算或处理逻辑之后返回要监听的值，例如通过计算属性或其他函数来获取需要监听的数据。

2. 响应式的数据源作为第一个参数：

• 直接监听响应式数据源的变化，无需在回调函数中手动获取要监听的值。
• 当响应式数据源发生变化时，watch函数会直接执行回调函数。
• 适用于直接监听响应式数据源的变化，例如ref、reactive等。