从个人的编码历程总结一些经验。如有收获，还请关注——猩猩伸手.jpg
引言
这个Bug是在排查前人代码中所发现的，很值得作为错误案例学习。
简单来说，这个bug是因为重复创建组件所导致的，因为业务中有一个页面是会将该全局组件隐藏，而之前的业务开发中，并没有人意识到这一点。
是的，没错。这是一个屎山代码堆叠起来的项目。
所以我觉得很有价值——因为有错误，才能吸取教训。
定时器重复创建
这一个很经常遇到的一个业务情况——定时做某件事，可能是排行榜更新，又或者是统计数据上报等等。
想当然的，我们会直接在vue中的created或者mounted生命周期加上定时器，或者是在某一处触发创建定时器。
而有时会遗忘在beforeDestroy生命周期中加上销毁定时器，而这在不重复创建该组件的情况下并没有太大问题（内存泄漏也就一点）。
当重复创建该组件时，就会发现，上一个定时器并没有被销毁，从而导致重复调用。
若这是一个请求动作，服务器将会有不必要的开销。
所以，在写上周期性定时器时，或者是用单次定时器模拟周期性，也都需要注意定时器的销毁。
mounted() {
this.timer = setInterval(() => {
this.counter++;
}, 1000); // 每秒执行一次
},
beforeDestroy() {
clearInterval(this.timer); // 在组件销毁之前清除定时器
}
vm.$on重复注册
这个问题类似于利用addEventListener 注册监听事件一样，问题的产生和上面情况是一样的。
都是因为重复创建组件导致的，所以处理的逻辑也是相同——在组件销毁时解绑监听事件。
mounted() {
// 在组件挂载时注册事件监听器
this.$on('customEvent', this.handleCustomEvent);
},
beforeDestroy() {
// 在组件销毁前移除事件监听器，防止内存泄漏
this.$off('customEvent', this.handleCustomEvent);
},
如果是addEventListener ，就是利用removeEventListener，相信聪明的你肯定会写，就不多此一举了。
--End
推荐阅读
看完一篇文章就该休息了，别看了，推荐个毛啊。该走走动动，放松眼睛和拉伸身体。工作虽重要，但生活才是人生的重点
