vue3 中如何监听 props 中的值的变化

在 Vue 3 中，你可以使用 watch 函数来监听组件的 props 值的变化。watch 函数允许你观察一个或多个响应式数据源，并在这些数据源发生变化时执行回调函数。

以下是一个示例，展示了如何在 Vue 3 中使用 watch 来监听 props 中的值的变化：

<template><div><p>Prop value: {{ myProp }}</p></div>
</template><script>
import { ref, watch } from 'vue';export default {props: {myProp: {type: String,required: true}},setup(props) {// 创建一个响应式的引用来存储 prop 的值const propValue = ref(props.myProp);// 使用 watch 函数来监听 prop 值的变化watch(() => props.myProp, (newVal, oldVal) => {console.log('Prop value changed from', oldVal, 'to', newVal);// 在这里可以执行任何需要在 prop 变化时进行的操作propValue.value = newVal;});return {propValue};}
};
</script>

在这个示例中，我们首先从 props 中获取 myProp 的值，并将其存储在一个响应式的引用 propValue 中。然后，我们使用 watch 函数来监听 props.myProp 的变化。当 myProp 的值发生变化时，watch 函数的回调会被调用，并且我们可以在新值和旧值之间进行操作。

这样，你就可以在 props 中的值发生变化时执行特定的逻辑了。