前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
前几天用户在我们项目上乱点一通，导致出现了性能问题，但是大家懂的，肯定又得是前端来背锅了 😭😭😭
相信大家都有做过这类的后台管理系统
我们团队也有类似于这样的后台管理系统平台，且当用户切换到某一个页面时，这个页面都得去请求最新的数据，呈现出来~
这就会造成一个问题：当用户频繁切换 Tab 切换的时候，就会不断地去发起请求，进行渲染呈现，但是其实正在有意义的只有用户最后一次切换到的页面，我服了，真有人会这么频繁切换吗？不会是用户自己切着玩吧？
那应该怎么去优化呢？很多人第一时间想到了防抖，但是我想说的是：一般的防抖还真防不住！
一般的防抖
如果是比较普通的场景还是可以用用一般防抖的，就比如某一个页面内的 Tab 切换，因为这一类的 Tab 切换说到底就是在同一个页面组件下去写代码逻辑，所以也比较好控制这些 Tab 切换后的防抖处理
我们用一个小案例来演练一下，我准备四个文件，Index.vue、Tab1.vue、Tab2.vue、Tab3.vue
Tab1.vue
Tab2.vue
Tab3.vue
Index.vue
我们只需要在 Index.vue 中监听 Tab 的切换，然后获取对应的组件实例，去执行它们的 init 方法，就可以做到每次切换 Tab 都能去请求获取最新的数据
有人会问为啥不能直接将每个组件中的 init 写在各自的 onMounted 中？我来回答一下吧，因为 Tab 默认会做页面缓存，也就是只有第一次切换过去才会执行 onMounted，往后都不会执行了，这样有助于提升性能，所以不能将 init 写在 onMounted 中~
现在我们切换 Tab，会发现每切换一次就去运行请求一次，这显然违背了我们的期望
所以我们可以直接给 onTabChange加上防抖，即可解决此问题
现在我同样是频繁切换，但是最终发起请求的只有一次，也就是用户最终跳转到的 Tab
这就是一般的防抖的应用场景
进阶版防抖
上面所说的一般的防抖只能适用于代码逻辑相对于比较集中的场景
但是如果是那种代码逻辑比较分散的场景呢？比如后台管理系统中，通过切换不同的 Tab 去切换不同的 路由页面，且这些页面都是经过 keep-alive 处理过的，且每个页面的请求逻辑都放在 onMounted 中
这些页面都是一个个的文件夹管理的，代码逻辑相对比较分散
为了简化场景，降低大家的阅读成本，我还是用刚刚的代码来模拟，还是 Index.vue、Tab1.vue、Tab2.vue、Tab3.vue
Tab1.vue
Tab2.vue
Tab3.vue
Index.vue
我们切换 Tab 时，可以发现每个 Tab 的请求只会发起一次，因为 onMounted 只会执行一次
但是我们想要的是每次切换 Tab 之后，每个页面都要去重新发起请求，那应该怎么做呢？
其实很简单，我们只需要 “改造” 一下 onMounted 即可
我们新建一个useCustomMounted.ts ，使用 watch + nextTick 来取代 onMounted
接着在Tab1.vue、Tab2.vue、Tab3.vue 中去使用这个 onCustomMounted，这里我只贴出 Tab1.vue 的，其他两个 Tab 同理，我就不贴出来了
接着在 Index.vue 中需要去监听 Tab 变化，并触发 changeActiveKey
现在切换 Tab 时，每次都会触发请求的起了
接下来就要加上防抖了，只需要加在 changeActiveKey 上即可
现在我同样是频繁切换，但是最终发起请求的只有一次，也就是用户最终跳转到的 Tab
结语
我是林三心，感谢您的观看阅读，如果对你有帮助的话，请点点关注呗~
