- 资讯首页 > 开发技术 > web开发 > JavaScript >
- Vue3中watchEffect的用途浅析
vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项。他可以实现在一个属性变更的时候,去执行我们想要的行为。比如:
但是 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 } }
从他们的不同点可以看出,他们的优缺点。并且可以在业务需求面前做出正确的选择。
停止监听
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 我们就可以对上面所述的情况作出比较优雅的优化。
到此这篇关于Vue3中watchEffect用途的文章就介绍到这了,更多相关Vue3 watchEffect用途内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
免责声明:本站发布的内容(图片、视频和文字)以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主,内容观点不代表本网站立场,如侵犯了原作者的版权,请告知一经查实,将立刻删除涉嫌侵权内容,联系我们QQ:712375056,同时欢迎投稿传递力量。
Copyright © 2009-2022 56dr.com. All Rights Reserved. 特网科技 特网云 版权所有 特网科技 粤ICP备16109289号
域名注册服务机构:阿里云计算有限公司(万网) 域名服务机构:烟台帝思普网络科技有限公司(DNSPod) CDN服务:阿里云计算有限公司 百度云 中国互联网举报中心 增值电信业务经营许可证B2
建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站