vue移除window窗口监听事件两种方法

例子：页面窗口变化时，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);
    // })
}