如何给vueuse库提PR
一、背景
最近在H5中进行频繁的路由跳转,当次数达到30次左右时,浏览器控制台就会出现一个节流的警告。这时候再次点击路由跳转时,页面会直接崩溃退出。排查后发现是vueuse
库中useUrlSearchParams
在异步任务中频繁使用造成的,后面解决完后就给vueuse
提了一个PR。下面就对当时的排查手段做一次复盘,以及如何去规避这个问题。
二、问题与解决
1、问题定位
- 通过定位页面跳转时,频繁调用的代码片段,问题初步锁定到了到了
axios
请求拦截器的useUrlSearchParams
上。 - 查看
useUrlSearchParams
的源码,最终定位到window.history.replaceState
这个浏览器的API上。源码链接
- 但是
window.history.replaceState
也算比较常见的一个API,平常使用并没有什么问题,而有问题的代码是在axios
的请求拦截器上使用的。 - 查看
axios
拦截器的源码,可以很清晰的看到,第一个作为入参的函数,是在Promise.resolve().then()
里面执行的,是一个微任务。axios源码链接
2、解决方案
知道问题所在其实就比较好解决了。有两种方式可以规避:
- 不在异步任务中使用
useUrlSearchParams
。比如前面的例子可以改为在同步代码中使用useUrlSearchParams
拿到对应的值,然后在axios
拦截器中读取这个变量。 - 如果确定自己在当前场景下,无需执行
window.history.replaceState
来修改当前历史实体的URL来响应用户的动作的话,那就不执行vueuse
源码中这个write
的操作就可以了。想着可能后面还是会有人踩同样的坑,干脆就提了个PR。
三、提PR
代码的改动很小,大部分的时间是花在写pr的描述、重现问题的步骤、重现的demo上了。提完第二天antfu在review完代码给出一些命名规范的修改建议后,就合并了这个PR。
- PR详情:github.com/vueuse/vueu…
- 具体重现的步骤和代码demo可看issue:github.com/vueuse/vueu…
四、其他
本来以为作者是会发v9.1.2
这个小版本的,因为都是新增无破坏性变更的特性。后面写这个总结的时候,刚好看到作者发布了新的版本v9.2.0
,不过也只有一个破坏性变更,还是可以比较放心地去升级的。
转载自:https://juejin.cn/post/7158356139699585055