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

一、wacthEffect

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

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

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

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

二、watch

不會(huì)立即執(zhí)行,需要手動(dòng)開啟immediate

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

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

1.1第一種方式偵聽

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

1.2第二種方式偵聽

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

1.3偵聽多個(gè)數(shù)據(jù)源

//偵聽多個(gè)數(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);
      })