淺談Vue3的watchEffect用途

淺談Vue3的watchEffect

vue2裏面的 watch api 你們應該都挺熟悉的了， vue2中vue實例裏面有一個 $watch 方法 在sfc(sigle file component)裏面有一個 watch 選項。他能夠實如今一個屬性變動的時候，去執行咱們想要的行爲。好比：

• 當ID改變的時候，從數據庫裏面獲取新的數據。
• 當屬性變換的時候執行一個動畫。
• 當搜索條件變動的時候，更新查詢到的數據。

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

咱們收集了一個 userID 的依賴，而後在 userID 改變的時候，就會執行watchEffect 的回調。

// 例子靈感來源於[文檔](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 不須要指定監聽的屬性，他會自動的收集依賴， 只要咱們回調中引用到了 響應式的屬性， 那麼當這些屬性變動的時候，這個回調都會執行，而 watch 只能監聽指定的屬性而作出變動(v3開始能夠同時指定多個)。
• 第二點就是 watch 能夠獲取到新值與舊值（更新前的值），而 watchEffect 是拿不到的。
• 第三點是 watchEffect 若是存在的話，在組件初始化的時候就會執行一次用以收集依賴（與computed同理），然後收集到的依賴發生變化，這個回調纔會再次執行，而 watch 不須要，由於他一開始就指定了依賴。

從他們的不一樣點能夠看出，他們的優缺點。而且能夠在業務需求面前作出正確的選擇。

watchEffect 進階

中止監聽

watchEffect 會返回一個用於中止這個監聽的函數，如法以下：

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

// later
stop()

例子來源於官方文檔， 上面有連接。

若是 watchEffect 是在 setup 或者 生命週期裏面註冊的話，在組件取消掛載的時候會自動的中止掉。

使 side effect 無效

什麼是 side effect ,不可預知的接口請求就是一個 side effect，假設咱們如今用一個用戶ID去查詢用戶的詳情信息，而後咱們監聽了這個用戶ID， 當用戶ID 改變的時候咱們就會去發起一次請求，這很簡單，用watch 就能夠作到。 可是若是在請求數據的過程當中，咱們的用戶ID發生了屢次變化，那麼咱們就會發起屢次請求，而最後一次返回的數據將會覆蓋掉咱們以前返回的全部用戶詳情。這不只會致使資源浪費，還沒法保證 watch 回調執行的順序。而使用 watchEffect 咱們就能夠作到。

onInvalidate()

onInvalidate(fn)傳入的回調會在 watchEffect 從新運行或者 watchEffect 中止的時候執行

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

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

藉助 onInvalidate 咱們就能夠對上面所述的狀況做出比較優雅的優化。

介紹結束。v3 值的期待。