快捷導(dǎo)航

淺談Vue3中watchEffect的具體用法

更新時間：2022年05月03日 09:06:05 作者：HexOr

watchEffect，它立即執(zhí)行傳入的一個函數(shù)，同時響應(yīng)式追蹤其依賴，并在其依賴變更時重新運(yùn)行該函數(shù)，本文主要介紹了Vue3中watchEffect的具體用法，感興趣的可以了解一下

前言

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 }）

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

watchEffect的副作用

什么是副作用（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的應(yīng)用

利用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ù)...這里只是一個拋磚引玉的作用，望大家多多發(fā)掘~