第三十九篇:Vue3 watch(ref和reactive的監視)

好家伙,

1.vue2中的watch是調用配置項,(只能寫一個)

   vue3中的watch是一個函數(可以寫很多個)

 

2.watch一些用法:

這里是定義的數據

set up(){ let sum =ref(0) let msg = ref('你好啊') let person = reactive({ name:'張三' job:{ j1{ salary:20 } } }) }
return{
 ..........
}

 

用法一:監視ref所定義的一個響應式數據

watch(sum,(newValue,oldvalue)=> {console.log('sum變了',newValue,oldvalue)}, {immediate:true})

 

 

用法二:監視ref所定義的多個對象

watch([sum,msg],(newValue,oldvalue)=> {console.log('sum變了',newValue,oldvalue)}, {immediate:true})

 

 

用法三:監視reactive監視reative所定義的一個響應式數據的全部屬性

注意:1.此處無法獲得正確的oldValue,對象拿不到oldVuale

　　 2.默認開啟深度監視?關不掉,強制開啟了深度監視(deep配置無效)

watch(person,(newValue,oldvalue)=> {console.log('sum變了',newValue,oldvalue)}, {deep:false})

 

用法四:監視reactive監視reative所定義的一個響應式數據的某個屬性   (寫成函數)

watch(()=>person.name,(newValue,oldvalue)=>
{console.log('sum變了',newValue,oldvalue)},)

 

用法五:監視reactive監視reative所定義的一個響應式數據的某些屬性

watch([()=>person.name,()=>person.age],(newValue,oldvalue)=> 
{console.log('sum變了',newValue,oldvalue)})

 

特殊情況:

watch(()=>person.name,(newValue,oldvalue)=> {console.log('sum變了',newValue,oldvalue)}, {deep:true})

此處監視得失reactive定義的對象中的某個屬性的對象 .

這里是普通對象了,deep配置又能用了

 

3.小結:1.監視reactive定義的響應式數據時:oldValue無法正確獲取,強制開啟了勝讀監視(deep配置失敗)

　　 2.監視reactive定義的響應式數據中某個屬性時:deep配置有效