vue3 监听组件props

在Vue 3中，可以通过使用watch或watchEffect函数来监听组件的props。这些函数可以接受一个回调函数作为参数，当组件的props发生变化时，回调函数将被调用。
以下是一个使用watch函数监听组件props的示例：
import { watch } from 'vue';

export default {
setup() {
const myProp = ref('');

watch(
() => this.myProp,
(newVal, oldVal) => {
// 当myProp发生变化时执行的回调函数
console.log(`myProp值变化为：${newVal}, 之前值为：${oldVal}`);
},
{ deep: true } // 可以选择深度监听对象属性的变化
}
}
登录后复制
在这个示例中，我们创建了一个名为myProp的引用，并通过watch函数监听它。当myProp的值发生变化时，回调函数将被调用，并打印出新的值和之前值的变化情况。你可以根据需要自定义回调函数的逻辑。
另外，Vue 3还引入了响应式系统的增强功能，例如使用watchEffect函数来更简洁地监听组件的props。下面是一个使用watchEffect函数的示例：
import { watchEffect } from 'vue';

export default {
setup() {
const myProp = ref('');

watchEffect(() => {
// 当myProp发生变化时执行的回调函数
console.log(`myProp值变化为：${myProp.value}`);
});
}
}
登录后复制
在这个示例中，我们使用watchEffect函数来监听myProp的值变化。当myProp的值发生变化时，回调函数将被调用，并打印出新的值。这种方式更加简洁，并且可以更好地处理异步操作。
需要注意的是，监听组件的props时需要注意性能问题，尤其是在大型项目中。如果props的数量和变化频率较高，可能会导致性能问题。因此，应该谨慎使用监听组件props的功能，并确保在必要时进行性能优化。