vue3中,我想监听 props 的变化

1,760 阅读1分钟

一般情况下,watch 是无法监听 props 变化的

如果你想监听 props 的变化,有2个方法,一是可以手动监听对 props 的变化,二是可以使用 watchEffect

示例:
现在有个 props.testData,我们想在 props.testData 变化的时候,改变 inputValue 的值

const props = defineProps({

testData: String,

})


const inputValue = ref('')

方法一:
手动监听对 props 的变化(watch的第一个参数得用箭头函数,不然是无法监听 props 变化的)


watch(() => props.testData, (newValue,oldValue) => {

console.log(`( newValue )===============>`, newValue);

console.log(`( oldValue )===============>`, oldValue);

inputValue.value = newValue

})

方法二:
使用 watchEffect


watchEffect(() =>{

console.log(`( watchEffect - props.testData )===============>`, props.testData);

inputValue.value = props.testData

})