例子:页面窗口变化时,echarts绘制的视图需要resize(),这时需要监听window,但是当组件消耗时也需要移除窗口监听事件。
涉及到的data数据和methods
//data
data(){
return{
timer:null, // 记录setTimeout
chartForm:null, // echarts视图
}
}
//methods
chartResize(){
//防抖
if(this.timer)
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.chartForm.resize();
},500)
}
第一种方法:在beforeDestroy钩子函数里销毁
mounted() {
window.addEventListener('resize', this.chartResize);
}
beforeDestroy() {
window.removeEventListener('resize', this.chartResize);
},
第二种方法: 通过$on
或 $once
监听页面生命周期销毁来移除监听
mounted() {
window.addEventListener('resize', this.chartResize);
this.$on("hook:beforeDestroy", () => {
window.removeEventListener('resize', this.chartResize);
})
// 或者
// window.addEventListener('resize', this.chartResize);
// this.$once("hook:beforeDestroy", () => {
// window.removeEventListener('resize', this.chartResize);
// })
}