浅谈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 值的期待。