在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等。