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 中的值发生变化时执行特定的逻辑了。