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

watchEffect，它立即執行傳入的一個函數，同時響應式追蹤其依賴，并在其依賴變更時重新運行該函數。（學習視頻分享：vue視頻教程）

換句話說：watchEffect相當于將watch 的依賴源和回調函數合并，當任何你有用到的響應式依賴更新時，該回調函數便會重新執行。不同于 watch，watchEffect 的回調函數會被立即執行（即 { immediate: true }）

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

watchEffect的副作用

什么是副作用（side effect），簡單的說副作用就是執行某種操作，如對外部可變數據或變量的修改，外部接口的調用等。watchEffect的回調函數就是一個副作用函數，因為我們使用watchEffect就是偵聽到依賴的變化后執行某些操作。

當執行副作用函數時，它勢必會對系統帶來一些影響，如在副作用函數里執行了一個定時器setInterval，因此我們必須處理副作用。Vue3的watchEffect偵聽副作用傳入的函數可以接收一個 onInvalidate 函數作為入參，用來注冊清理失效時的回調。當以下情況發生時，這個失效回調會被觸發：

• 副作用即將重新執行時（即依賴的值改變）
• 偵聽器被停止 (通過顯示調用返回值停止偵聽，或組件被卸載時隱式調用了停止偵聽)

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

上述代碼打印的順序為： 0 -> 執行了onInvalidate，最后執行 -> 1

分析：初始化時先打印count的值0， 然后由于定時器把count的值更新為1, 此時副作用即將重新執行，因此onInvalidate的回調函數會被觸發，打印執行了onInvalidate，然后執行了副作用函數，打印count的值1。

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

上述代碼：當我們顯示執行stop函數停止偵聽，此時也會觸發onInvalidate的回調函數。同樣，watchEffect所在的組件被卸載時會隱式調用stop函數停止偵聽，故也能觸發onInvalidate的回調函數。

watchEffect的應用

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

場景一：平時我們定義一個定時器，或者監聽某個事件，我們需要在mounted生命周期鉤子函數內定義或者注冊，然后組件銷毀之前在beforeUnmount鉤子函數里清除定時器或取消監聽。這樣做我們的邏輯被分散在兩個生命周期，不利于維護和閱讀。

如果我利用watchEffect，創造和銷毀邏輯放在了一起，此時代碼更加優雅易讀~

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

場景二：利用watchEffect作一個防抖節流（如取消請求）

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

……

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

（學習視頻分享：web前端開發、編程基礎視頻）