全面總結(jié)Vue3.0的多種偵聽方式
偵聽器
雖然計算屬性在大多數(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); })
總結(jié)
到此這篇Vue3.0多種偵聽方式的文章就介紹到這了,更多相關(guān)Vue3.0偵聽方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09詳解如何在vue項目中使用eslint+prettier格式化代碼
在開發(fā)中我們需要一種能夠統(tǒng)一團隊代碼風(fēng)格的工具,作為強制性的規(guī)范,統(tǒng)一整個項目的代碼風(fēng)格,這篇文章主要介紹了詳解如何在vue項目中使用eslint+prettier格式化代碼,需要的朋友可以參考下2018-11-11Vue源碼解讀之Component組件注冊的實現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08vue中radio根據(jù)動態(tài)值綁定checked無效的解決
這篇文章主要介紹了vue中radio根據(jù)動態(tài)值綁定checked無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03vue項目優(yōu)雅實現(xiàn)自動引入組件的方法詳解
在我們寫vue項目的時候,都會引入一些組件庫,有時候有可能還不止一個組件庫,那么如何優(yōu)雅的實現(xiàn)自動引入組件呢,下面小編就來和大家詳細(xì)講講吧2023-09-09vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼
這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題
今天小編就為大家分享一篇解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08