本篇文章帶大家了解一下Vue3中的watchEffect，介紹一下它的副作用，并聊聊它可以做什么事情，希望對(duì)大家有所幫助！

watchEffect，它立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)。（學(xué)習(xí)視頻分享：vue視頻教程）

換句話說(shuō)：watchEffect相當(dāng)于將watch 的依賴源和回調(diào)函數(shù)合并，當(dāng)任何你有用到的響應(yīng)式依賴更新時(shí)，該回調(diào)函數(shù)便會(huì)重新執(zhí)行。不同于 watch，watchEffect 的回調(diào)函數(shù)會(huì)被立即執(zhí)行（即 { immediate: true }）

此文主要講述怎樣利用清除副作用使我們的代碼更加優(yōu)雅~

watchEffect的副作用

什么是副作用（side effect），簡(jiǎn)單的說(shuō)副作用就是執(zhí)行某種操作，如對(duì)外部可變數(shù)據(jù)或變量的修改，外部接口的調(diào)用等。watchEffect的回調(diào)函數(shù)就是一個(gè)副作用函數(shù)，因?yàn)槲覀兪褂?code>watchEffect就是偵聽(tīng)到依賴的變化后執(zhí)行某些操作。

當(dāng)執(zhí)行副作用函數(shù)時(shí)，它勢(shì)必會(huì)對(duì)系統(tǒng)帶來(lái)一些影響，如在副作用函數(shù)里執(zhí)行了一個(gè)定時(shí)器setInterval，因此我們必須處理副作用。Vue3的watchEffect偵聽(tīng)副作用傳入的函數(shù)可以接收一個(gè) onInvalidate 函數(shù)作為入?yún)?，用?lái)注冊(cè)清理失效時(shí)的回調(diào)。當(dāng)以下情況發(fā)生時(shí)，這個(gè)失效回調(diào)會(huì)被觸發(fā)：

• 副作用即將重新執(zhí)行時(shí)（即依賴的值改變）
• 偵聽(tīng)器被停止 (通過(guò)顯示調(diào)用返回值停止偵聽(tīng)，或組件被卸載時(shí)隱式調(diào)用了停止偵聽(tīng))

import { watchEffect, ref } from 'vue'  const count = ref(0) watchEffect((onInvalidate) => {   console.log(count.value)   onInvalidate(() => {     console.log('執(zhí)行了onInvalidate')   }) })  setTimeout(()=> {   count.value++ }, 1000)

上述代碼打印的順序?yàn)椋?0 -> 執(zhí)行了onInvalidate，最后執(zhí)行 -> 1

分析：初始化時(shí)先打印count的值0， 然后由于定時(shí)器把count的值更新為1, 此時(shí)副作用即將重新執(zhí)行，因此onInvalidate的回調(diào)函數(shù)會(huì)被觸發(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ù)停止偵聽(tīng)，此時(shí)也會(huì)觸發(fā)onInvalidate的回調(diào)函數(shù)。同樣，watchEffect所在的組件被卸載時(shí)會(huì)隱式調(diào)用stop函數(shù)停止偵聽(tīng)，故也能觸發(fā)onInvalidate的回調(diào)函數(shù)。

watchEffect的應(yīng)用

利用watchEffect的非惰性執(zhí)行，以及傳入的onInvalidate 函數(shù)，我們可以做什么事情了？

場(chǎng)景一：平時(shí)我們定義一個(gè)定時(shí)器，或者監(jiān)聽(tīng)某個(gè)事件，我們需要在mounted生命周期鉤子函數(shù)內(nèi)定義或者注冊(cè)，然后組件銷毀之前在beforeUnmount鉤子函數(shù)里清除定時(shí)器或取消監(jiān)聽(tīng)。這樣做我們的邏輯被分散在兩個(gè)生命周期，不利于維護(hù)和閱讀。

如果我利用watchEffect，創(chuàng)造和銷毀邏輯放在了一起，此時(shí)代碼更加優(yōu)雅易讀~

// 定時(shí)器注冊(cè)和銷毀 watchEffect((onInvalidate) => {   const timer = setInterval(()=> {     // ...   }, 1000)   onInvalidate(() => clearInterval(timer)) })  const handleClick = () => {  // ... } // dom的監(jiān)聽(tīng)和取消監(jiān)聽(tīng) onMounted(()=>{   watchEffect((onInvalidate) => {     document.querySelector('.btn').addEventListener('click', handleClick, false)     onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))   }) })

場(chǎng)景二：利用watchEffect作一個(gè)防抖節(jié)流（如取消請(qǐng)求）

const id = ref(13) watchEffect(onInvalidate => {    // 異步請(qǐng)求   const token = performAsyncOperation(id.value)   // 如果id頻繁改變，會(huì)觸發(fā)失效函數(shù)，取消之前的接口請(qǐng)求   onInvalidate(() => {     // id has changed or watcher is stopped.     // invalidate previously pending async operation     token.cancel()   }) })

……

當(dāng)然watchEffect還能做很多事情，比如打開(kāi)一個(gè)修改的modal彈窗，如果檢測(cè)到id變化，我們可以在onInvalidate函數(shù)內(nèi)，重置初始參數(shù)…這里只是一個(gè)拋磚引玉的作用，望大家多多發(fā)掘~

（學(xué)習(xí)視頻分享：web前端開(kāi)發(fā)、編程基礎(chǔ)視頻）