如何给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源码链接

• 后面再写一个demo在setTimeout中执行，发现宏任务也会出现问题。
• 综上可以得出重现问题的条件：异步任务 + window.history.replaceState + 频繁调用

2、解决方案

知道问题所在其实就比较好解决了。有两种方式可以规避：

1. 不在异步任务中使用useUrlSearchParams。比如前面的例子可以改为在同步代码中使用useUrlSearchParams拿到对应的值，然后在axios拦截器中读取这个变量。
2. 如果确定自己在当前场景下，无需执行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，不过也只有一个破坏性变更，还是可以比较放心地去升级的。