全面總結Vue3.0的多種偵聽方式

更新時間：2021年10月09日 11:02:13 作者：前端老實人

Vue提供了一種更通用的方式來觀察和響應當前活動的實例上的數據變動:偵聽屬性,下面這篇文章主要給大家介紹了關于Vue3.0多種偵聽方式的相關資料,需要的朋友可以參考下

偵聽器

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過watch選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。

一、wacthEffect

立即執(zhí)行,沒有immediate

偵聽，watchEffect是立即執(zhí)行的，沒有immediate,不需要傳遞偵聽的內容,自動會感知代碼依賴,不需要傳參,只需要傳一個回調函數不能獲取之前的值

如果需要停用偵聽器,可以回調這個偵聽器函數

const stop = watchEffect(()=>{
        // console.log('num:',num.value);
        // console.log('num:',str.value);
      })

二、watch

不會立即執(zhí)行,需要手動開啟immediate

// 指定主要偵聽的值num
      watch(num,(val,oval)=>{
        // val:新值,oval:之前的值
        // console.log(num.value);
        // console.log(val,oval);
      },{//第二個參數obj immediate,deep
      immediate:true//默認就是只有數據改變時才會監(jiān)聽,
      // 第一次創(chuàng)建的時候不會執(zhí)行,設置成true,第一次就會執(zhí)行
      })

偵聽ref的數據源
偵聽reactive數據源

1.1第一種方式偵聽

//偵聽state下的id,對象數據的變化
      watch(state,(val,oval)=>{
        // console.log('id',val.id,oval);
      },{
        immediate:true,
        deep:true//開啟深度監(jiān)聽,能夠偵聽到對象屬性值的變化
      })

1.2第二種方式偵聽

// 偵聽state.uname
      watch(()=>state.uname,(uname,p)=>{
        //uname新值,p舊值
        console.log(uname,p);
      },{
        immediate:true
      })

1.3偵聽多個數據源

//偵聽多個數據(id,uname)
    //()=>state.id,相當于//object.values(toRefs(state))解構了
     const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // id新,oid舊
        console.log('id',id,oid);
        // uname新,oname舊
        console.log('uname',uname,oname);
      })