vue3中watch使用及watchEffect對比

注意:一、監聽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回調


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • computed 計算屬性功能和vue2一樣,可以緩存得到的結果,只有當依賴的數據發生變化后才會重新觸發的邏輯,計...
    千杯不倒王堯閱讀 1,492評論 0 0
  • vue3中的watch監聽屬性 watch 接收兩個參數,第一個參數是監聽的屬性,多個屬性可傳入數組, 第二個參數...
    楊羊羊楊閱讀 2,025評論 0 0
  • 基礎部分 模版語法 1.computed和watch的區別 計算屬性computed :支持緩存,data數據不變...
    王蕾_fd49閱讀 598評論 0 0
  • 一.簡介 2020年9月18日,Vue.js發布3.0版本,代號:One Piece(海賊王) 和vue2相比它的...
    e只咸魚閱讀 2,146評論 4 37
  • vue3.0入門到精通 附B站講解視頻 vue3+typescript入門到精通[https://www.bili...
    王大合閱讀 8,606評論 1 4