vue_iframe使用postmessage传值中事件多次绑定问题解决

问题

在vue项目中使用了iframe,iframe和vue页面交互使用了postMessage,如下代码,发现一个bug,重新进入这个页面,1就会多打印,次数和进入页面的次数相同

//iframe
window.parent.postMessage({
   info:2
})
//di.vue
mounted(){
    window.removeEventListener('message,this.diHandler)
    window.addEventListener('message',this.diHandler);
}
methods:{
  diHandler(){
     console.log(1)
  }
}

解决

vue的生命周期中又一句话:updateDestory用于做事件的解绑....

问题解决了

具体原理等我之后在补充

//di.vue
mounted(){    
    window.addEventListener('message',this.diHandler);
},
updateDestory(){
    window.removeEventListener('message,this.diHandler)
},
methods:{
  diHandler(){
     console.log(1)
  }
}