浅谈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(() => {  /* ... */})// laterstop()

例子来源于官网文档， 下面有链接。

如果 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 值的期待。