注意:一、監聽reactive定義的響應式數據,此時無法正確獲取oldValue,強制開啟了深度監視(deep配置無效)
**特殊情況:如果監聽的是reactive定義的對象中的某個屬性(這個屬性依然是一個對象),所以deep配置有效
示例:
二、監聽多個數據時需要使用數組的形式,獲取值也是數組形式
監聽單個ref定義的數據
watch(sum,(newval,oldval)=>{
? ? ? ? //? console.log('sum變了',newval,oldval)
? ? ? ? // })
三、監聽reactive定義的一個響應式數據中的某個屬性
watch(()=>person.age,(nval,oval)=>{
? ? ? ? ? ? console.log('age變化了nval',nval)
? ? ? ? ? ? console.log('age變化了oval',oval)
? ? ? ? })
四、監聽reactive定義的一個響應式數據中的某些屬性
watch([()=>person.age,()=>person.firstname],(nval,oval)=>{
? ? ? ? ? ? console.log('person的age或firstname變化了',nval,oval)
? ? ? ? })
五、如果是使用ref定義的對象,可以監聽該對象.value或者開啟deep:true
watchEffect:相比于watch,watchEffect不需要指定監聽的對象、回調,相當于computed計算屬性但是不同的是watchEffect不需要返回值,更注重變化的過程
示例:當點擊事件觸發watchEffect依賴的屬性值發生變化時就會執行watchEffect回調