vue3 中 在那个周期销毁 window.addEventListener
时间: 2024-09-14 20:05:50 浏览: 138
解决vue 给window添加和移除resize事件遇到的坑
在Vue3中,如果你需要在组件销毁时移除通过`window.addEventListener`添加的事件监听器,你应该在`beforeDestroy`或`onBeforeUnmount`生命周期钩子中进行移除。这两个生命周期钩子分别对应Vue2和Vue3,其中Vue3推荐使用`onBeforeUnmount`。这样做可以确保在组件被销毁之后,不会发生内存泄漏或错误地触发事件。
具体来说,你可以在组件的`beforeDestroy`钩子中调用`removeEventListener`来移除事件监听器,示例如下:
```javascript
export default {
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
// 处理事件逻辑
}
}
}
```
在Vue3中,推荐使用`onBeforeUnmount`:
```javascript
export default {
onBeforeUnmount() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
// 处理事件逻辑
}
}
}
```
这样可以确保组件在被卸载前移除事件监听器,防止组件销毁后事件依然被触发。
阅读全文