這篇文章帶大家了解一下Vue3中的watchEffect，介紹一下它的副作用，並聊聊它可以做什麼事情，希望對大家有幫助！
watchEffect，它立即執行傳入的一個函數，同時響應式追蹤其依賴，並在其依賴變更時重新運行該函數。 （學習影片分享：vue影片教學）
換句話說：watchEffect相當於將watch 的依賴來源和回呼函數合併，當任何你有用到的響應式依賴更新時，這個回呼函數就會重新執行。有別於 watch，watchEffect 的回呼函數會立即執行（即 { immediate: true }）
#這篇文章主要講述如何利用清除副作用使我們的程式碼更優雅~
什麼是副作用（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的非惰性執行，以及傳入的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函數內，重置初始參數...這裡只是一個拋磚引玉的作用，望大家多多發掘~
以上是一文了解Vue3中的watchEffect，聊聊其應用場景！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
