vue2和vue3中组件销毁都会移除事件监听器:
- 组件销毁自动移除的监听器指的是同步创建的各种watcher
- 对于异步创建的watcher,需要手动移除
- 对于dom事件监听器,比如使用addEventListener创建的监听器,需要手动移除
- eventBus方式总线订阅事件,需要手动移除
不移除可能造成内存泄漏!
vue2
从vue2的生命周期知道,destroyed钩子,实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
如下代码,需要手动停止interval
<template>
<button @click="handleClick">start</button>
</template>
<script>
export default {
data() {
return {
interval: null,
};
},
beforeDestroy(){
this.handleStop()
},
methods: {
handleClick() {
this.interval = setInterval(() => {
//some actions
console.log("interval");
}, 2000);
},
handleStop() {
clearInterval(this.interval);
this.interval = null;
},
},
};
</script>
vue3
一般情况下,一个组件被销毁或者卸载后,监听器也会被停止,而不需要我们手动去关闭监听器。但是总是有一些特殊情况,即使组件卸载了,但是监听器依然存在,这个时候其实式需要手动关闭它的,否则容易造成内存泄漏。
下面这中写法,就需要手动停止监听器:
<script setup>
import { watchEffect } from 'vue'
// 自动停止
watchEffect(() => {})
// 不会自动停止
setTimeout(() => {
watchEffect(() => {})
}, 200)
</script>
上段代码中采用异步的方式创建了一个监听器,这个时候监听器没有与当前组件绑定,所以即使组件销毁了,监听器依然存在,当组件销毁时,监听器会继续引用该组件,防止其被垃圾回收。其实就是闭包。
用如下方法关闭:
const unwatch = watchEffect(() => {})
// 关闭监听器
unwatch()