关于 addEventListener 在 vue3 项目中使用，遇到的bug

最新推荐文章于 2025-06-05 17:23:13 发布

原创最新推荐文章于 2025-06-05 17:23:13 发布 · 9.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #前端

工作中一些小技巧专栏收录该内容

9 篇文章

订阅专栏

本文讨论了在Vue应用中如何正确处理DOM事件监听，特别是在监听document对象时，未正确移除监听器可能导致的内存泄漏和性能问题。作者分享了两种鼠标抬起事件的处理方式，并强调了在组件卸载时移除事件监听的重要性，以防止不必要的事件触发和潜在的bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重点是要记得清空它,如果你触发监听是某个 div 还好，但是如果是 document，那整个 DOM 一直都在监听,不会销毁，会触发好多奇怪的 bug，

（别问我怎么知道，蓝瘦香菇）

onMounted(() => {
nextTick(() => {
mouseUpLisenter();
});
});
function mouseUpLisenter() {
document.addEventListener('mouseup', dosome);
}
function dosome(event: any) {
//在鼠标抬起时要做的一些操作
return false;
}
onBeforeUnmount(() => {
document.removeEventListener('mouseup', dosome);
});

鼠标事件其实第二种写法
document.onmouseup = function (e) {
//做些你的处理，然后置为 null 就是清除绑定了
document.onmousemove = null;
document.onmouseup = null;
};