共计 1511 个字符,预计需要花费 4 分钟才能阅读完成。
浅谈 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 值的期待。