目錄
一、wacthEffect
二、watch
1.1第一種方式偵聽
1.2第二種方式偵聽
1.3偵聽多個資料源
一、wacthEffect
- 立即執行,沒有immediate
- 偵聽，watchEffect是立即執行的，沒有immediate,不需要傳遞偵聽的內容,自動會感知代碼依賴,不需要傳參,只需要傳一個回呼函式不能獲取之前的值
- 如果需要停用偵聽器,可以回呼這個偵聽器函式
const stop = watchEffect(()=>{
// console.log('num:',num.value);
// console.log('num:',str.value);
})
二、watch
- 不會立即執行,需要手動開啟immediate
// 指定主要偵聽的值num
watch(num,(val,oval)=>{
// val:新值,oval:之前的值
// console.log(num.value);
// console.log(val,oval);
},{//第二個引數obj immediate,deep
immediate:true//默認就是只有資料改變時才會監聽,
// 第一次創建的時候不會執行,設定成true,第一次就會執行
})
-
偵聽ref的資料源
-
偵聽reactive資料源
-
1.1第一種方式偵聽
//偵聽state下的id,物件資料的變化
watch(state,(val,oval)=>{
// console.log('id',val.id,oval);
},{
immediate:true,
deep:true//開啟深度監聽,能夠偵聽到物件屬性值的變化
})
-
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);
})最后
如果對您有幫助，希望能給個👍評論收藏三連！
想跟博主交朋友的可以通過查找，公_號?：前端老實人，聯系到博主并獲取更多資料
博主為人老實，無償解答問題哦?
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/307334.html
標籤：其他
下一篇：egg(六):解決跨域問題