vue3 组件销毁 注销监听事件
时间: 2023-07-12 17:53:55 浏览: 197
vue 解除鼠标的监听事件的方法
在Vue3中,组件销毁时也需要注销监听事件以避免内存泄漏。可以使用`onUnmounted()`函数来实现,在这个函数中可以使用`removeEventListener()`或`off()`等方法来注销之前添加的监听事件。具体实现方式取决于使用的监听函数的类型和添加监听的方式。例如,你可以在组件中这样使用`onUnmounted()`函数:
```javascript
import { onUnmounted } from 'vue'
export default {
setup() {
const handleClick = () => {
console.log('click')
}
const addListener = () => {
document.addEventListener('click', handleClick)
}
const removeListener = () => {
document.removeEventListener('click', handleClick)
}
onUnmounted(() => {
removeListener()
})
return {
addListener,
removeListener
}
}
}
```
在这个例子中,我们在组件的`setup()`函数中定义了一个`handleClick()`函数,并在`addListener()`函数中将其添加为`click`事件的监听函数。然后,在组件销毁时使用`onUnmounted()`函数来注销这个监听函数。
阅读全文