在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>
两种方式的区别：
函数作为第一个参数： 函数会在每次依赖项变化时被调用，并返回要监听的值。当依赖项变化时，watch函数会自动重新运行该函数，并比较返回的值与上一次的值，以确定是否执行回调函数。适用于在计算或处理逻辑之后返回要监听的值，例如通过计算属性或其他函数来获取需要监听的数据。 响应式的数据源作为第一个参数： 直接监听响应式数据源的变化，无需在回调函数中手动获取要监听的值。当响应式数据源发生变化时，watch函数会直接执行回调函数。适用于直接监听响应式数据源的变化，例如ref、reactive等。如果觉得《【vue3】在 vue3中 组合式API watch 如何监听props的数据》对你有帮助，请点赞、收藏，并留下你的观点哦！
