快捷導(dǎo)航

Vue3中watchEffect的用途淺析

更新時間：2021年07月05日 14:34:22 作者：李孤雛

這篇文章主要給大家介紹了關(guān)于Vue3中watchEffect用途的相關(guān)資料, watch和watchEffect都是監(jiān)聽器,但在寫法和使用上有所區(qū)別,本文進(jìn)行了詳細(xì)的介紹,需要的朋友可以參考下

前言

vue2里面的 watch api 大家應(yīng)該都挺熟悉的了， vue2中vue實例里面有一個 $watch 方法在sfc(sigle file component)里面有一個 watch 選項。他可以實現(xiàn)在一個屬性變更的時候，去執(zhí)行我們想要的行為。比如：

當(dāng)ID改變的時候，從數(shù)據(jù)庫里面獲取新的數(shù)據(jù)。
當(dāng)屬性變換的時候執(zhí)行一個動畫。
當(dāng)搜索條件變更的時候，更新查詢到的數(shù)據(jù)。

但是 vue3 除了 watch api，還新增了一個 watchEffect 的 api，我們來看看他的用法。

我們收集了一個 userID 的依賴，然后在 userID 改變的時候，就會執(zhí)行watchEffect 的回調(diào)。

// 例子靈感來源于[文檔](https://v3.vuejs.org/api/computed-watch-api.html#watcheffect)

import { watchEffect, ref } from 'vue'
setup () {
    const userID = ref(0)
    watchEffect(() => console.log(userID))
    setTimeout(() => {
      userID.value = 1
    }, 1000)

    /*
      * LOG
      * 0 
      * 1
    */

    return {
      userID
    }
 }

與 watch 有什么不同？

第一點我們可以從示例代碼中看到 watchEffect 不需要指定監(jiān)聽的屬性，他會自動的收集依賴，只要我們回調(diào)中引用到了響應(yīng)式的屬性，那么當(dāng)這些屬性變更的時候，這個回調(diào)都會執(zhí)行，而 watch 只能監(jiān)聽指定的屬性而做出變更(v3開始可以同時指定多個)。
第二點就是 watch 可以獲取到新值與舊值（更新前的值），而 watchEffect 是拿不到的。
第三點是 watchEffect 如果存在的話，在組件初始化的時候就會執(zhí)行一次用以收集依賴（與computed同理），而后收集到的依賴發(fā)生變化，這個回調(diào)才會再次執(zhí)行，而 watch 不需要，因為他一開始就指定了依賴。

從他們的不同點可以看出，他們的優(yōu)缺點。并且可以在業(yè)務(wù)需求面前做出正確的選擇。

watchEffect 進(jìn)階

停止監(jiān)聽

watchEffect 會返回一個用于停止這個監(jiān)聽的函數(shù)，如法如下：

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

例子來源于官方文檔，上面有鏈接。

如果 watchEffect 是在 setup 或者生命周期里面注冊的話，在組件取消掛載的時候會自動的停止掉。

使 side effect 無效

什么是 side effect ,不可預(yù)知的接口請求就是一個 side effect，假設(shè)我們現(xiàn)在用一個用戶ID去查詢用戶的詳情信息，然后我們監(jiān)聽了這個用戶ID，當(dāng)用戶ID 改變的時候我們就會去發(fā)起一次請求，這很簡單，用watch 就可以做到。但是如果在請求數(shù)據(jù)的過程中，我們的用戶ID發(fā)生了多次變化，那么我們就會發(fā)起多次請求，而最后一次返回的數(shù)據(jù)將會覆蓋掉我們之前返回的所有用戶詳情。這不僅會導(dǎo)致資源浪費，還無法保證 watch 回調(diào)執(zhí)行的順序。而使用 watchEffect 我們就可以做到。

onInvalidate()

onInvalidate(fn)傳入的回調(diào)會在 watchEffect 重新運行或者 watchEffect 停止的時候執(zhí)行

watchEffect(() => {
      // 異步api調(diào)用，返回一個操作對象
      const apiCall = someAsyncMethod(props.userID)

      onInvalidate(() => {
        // 取消異步api的調(diào)用。
        apiCall.cancel()
      })
})

借助 onInvalidate 我們就可以對上面所述的情況作出比較優(yōu)雅的優(yōu)化。