vue项目 处理addEventListener的坑

最近项目中遇到一个问题,让我很是费解。就是同一个页面在首次进入并且对页面进行一些操作时并没有什么问题。数据的交互及保存操作也能完成。但当次页面重复几次进入并操作时,页面就会卡死,cpu的占用也急剧升高。在排查了一天之后终于找到了原因:

原来是这个页面之中注册了一个addEventListener事件,用来监听document的点击事件,从而对用户的点击做出一些反馈。


乍看这里是没有什么问题的,但我疏忽的是光注册了这个监听事件,没有对这个事件做到“有始有终”。这是对document的监听事件是一个全局的操作,如果没有手动的去取消这个监听那么它的监听机制也就一直存在着,这样每次进入这个页面也就意味着都会增加一次对它的监听。多次之后自然页面也就会卡死了。发现了问题,那么解决方案也就很简单了,只要在页面被注销之前手动清除这个监听事件也就可以了:


这之后再进行多次的操作该页面也就不会有这样的问题了~

你可能感兴趣的:(vue项目 处理addEventListener的坑)