快捷導(dǎo)航

Vue3中watchEffect的用途淺析

更新時(shí)間：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實(shí)例里面有一個(gè) $watch 方法在sfc(sigle file component)里面有一個(gè) watch 選項(xiàng)。他可以實(shí)現(xiàn)在一個(gè)屬性變更的時(shí)候，去執(zhí)行我們想要的行為。比如：

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

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

我們收集了一個(gè) userID 的依賴，然后在 userID 改變的時(shí)候，就會(huì)執(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 有什么不同？

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

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

watchEffect 進(jìn)階

停止監(jiān)聽

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

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

// later
stop()

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

如果 watchEffect 是在 setup 或者生命周期里面注冊(cè)的話，在組件取消掛載的時(shí)候會(huì)自動(dòng)的停止掉。

使 side effect 無效

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

onInvalidate()

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

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

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

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