浅谈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 值的期待。
注意：本文来自SegmentFault博客
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！