您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Vue3中的watchEffect怎么應(yīng)用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue3中的watchEffect怎么應(yīng)用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
watchEffect
,它立即執(zhí)行傳入的一個函數(shù),同時響應(yīng)式追蹤其依賴,并在其依賴變更時重新運(yùn)行該函數(shù)。
換句話說:watchEffect
相當(dāng)于將watch
的依賴源和回調(diào)函數(shù)合并,當(dāng)任何你有用到的響應(yīng)式依賴更新時,該回調(diào)函數(shù)便會重新執(zhí)行。不同于 watch
,watchEffect
的回調(diào)函數(shù)會被立即執(zhí)行(即 { immediate: true }
)
什么是副作用(side effect
),簡單的說副作用就是執(zhí)行某種操作,如對外部可變數(shù)據(jù)或變量的修改,外部接口的調(diào)用等。watchEffect
的回調(diào)函數(shù)就是一個副作用函數(shù),因為我們使用watchEffect
就是偵聽到依賴的變化后執(zhí)行某些操作。
當(dāng)執(zhí)行副作用函數(shù)時,它勢必會對系統(tǒng)帶來一些影響,如在副作用函數(shù)里執(zhí)行了一個定時器setInterval
,因此我們必須處理副作用。Vue3
的watchEffect
偵聽副作用傳入的函數(shù)可以接收一個 onInvalidate
函數(shù)作為入?yún)?,用來注冊清理失效時的回調(diào)。當(dāng)以下情況發(fā)生時,這個失效回調(diào)會被觸發(fā):
副作用即將重新執(zhí)行時(即依賴的值改變)
偵聽器被停止 (通過顯示調(diào)用返回值停止偵聽,或組件被卸載時隱式調(diào)用了停止偵聽)
import { watchEffect, ref } from 'vue' const count = ref(0) watchEffect((onInvalidate) => { console.log(count.value) onInvalidate(() => { console.log('執(zhí)行了onInvalidate') }) }) setTimeout(()=> { count.value++ }, 1000)
上述代碼打印的順序為: 0
-> 執(zhí)行了onInvalidate,最后執(zhí)行
-> 1
分析:初始化時先打印count
的值0
, 然后由于定時器把count
的值更新為1
, 此時副作用即將重新執(zhí)行,因此onInvalidate
的回調(diào)函數(shù)會被觸發(fā),打印執(zhí)行了onInvalidate
,然后執(zhí)行了副作用函數(shù),打印count
的值1
。
import { watchEffect, ref } from 'vue' const count = ref(0) const stop = watchEffect((onInvalidate) => { console.log(count.value) onInvalidate(() => { console.log('執(zhí)行了onInvalidate') }) }) setTimeout(()=> { stop() }, 1000)
上述代碼:當(dāng)我們顯示執(zhí)行stop
函數(shù)停止偵聽,此時也會觸發(fā)onInvalidate
的回調(diào)函數(shù)。同樣,watchEffect
所在的組件被卸載時會隱式調(diào)用stop
函數(shù)停止偵聽,故也能觸發(fā)onInvalidate
的回調(diào)函數(shù)。
利用watchEffect
的非惰性執(zhí)行,以及傳入的onInvalidate
函數(shù),我們可以做什么事情了?
場景一:平時我們定義一個定時器,或者監(jiān)聽某個事件,我們需要在mounted
生命周期鉤子函數(shù)內(nèi)定義或者注冊,然后組件銷毀之前在beforeUnmount
鉤子函數(shù)里清除定時器或取消監(jiān)聽。這樣做我們的邏輯被分散在兩個生命周期,不利于維護(hù)和閱讀。
如果我利用watchEffect
,創(chuàng)造和銷毀邏輯放在了一起,此時代碼更加優(yōu)雅易讀~
// 定時器注冊和銷毀 watchEffect((onInvalidate) => { const timer = setInterval(()=> { // ... }, 1000) onInvalidate(() => clearInterval(timer)) }) const handleClick = () => { // ... } // dom的監(jiān)聽和取消監(jiān)聽 onMounted(()=>{ watchEffect((onInvalidate) => { document.querySelector('.btn').addEventListener('click', handleClick, false) onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick)) }) })
場景二:利用watchEffect作一個防抖節(jié)流(如取消請求)
const id = ref(13) watchEffect(onInvalidate => { // 異步請求 const token = performAsyncOperation(id.value) // 如果id頻繁改變,會觸發(fā)失效函數(shù),取消之前的接口請求 onInvalidate(() => { // id has changed or watcher is stopped. // invalidate previously pending async operation token.cancel() }) })
......
當(dāng)然watchEffect
還能做很多事情,比如打開一個修改的modal
彈窗,如果檢測到id
變化,我們可以在onInvalidate
函數(shù)內(nèi),重置初始參數(shù)
讀到這里,這篇“Vue3中的watchEffect怎么應(yīng)用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。