全面總結(jié)Vue3.0的多種偵聽方式

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

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

偵聽器

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

一、wacthEffect

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

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

如果需要停用偵聽器,可以回調(diào)這個偵聽器函數(shù)

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);
      },{//第二個參數(shù)obj immediate,deep
      immediate:true//默認(rèn)就是只有數(shù)據(jù)改變時才會監(jiān)聽,
      // 第一次創(chuàng)建的時候不會執(zhí)行,設(shè)置成true,第一次就會執(zhí)行
      })

偵聽ref的數(shù)據(jù)源
偵聽reactive數(shù)據(jù)源

1.1第一種方式偵聽

//偵聽state下的id,對象數(shù)據(jù)的變化
      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偵聽多個數(shù)據(jù)源

//偵聽多個數(shù)據(jù)(id,uname)
    //()=>state.id,相當(dāng)于//object.values(toRefs(state))解構(gòu)了
     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);
      })