设置setInterval定时器、postMessage、addEventListener监听器

项目中经常会使用到addEventListener，setInterval，非常好用，但也会有一些意想不到的bug。
场景：项目中在mounted中绑定了一个监听器window.addEventListener('message', this.getList)，父子页面间通过postMessage发送消息，然后就出现了bug，this.getList调用了好几次，刚开始没有规律，以为代码有问题，postMessage发送了好几条消息，又以为是监听到了其他页面发的消息，排查后发现都不是，并且发现规律，每跳转一次页面就会多发送一次消息，才想到是监听器没有销毁，于是每次进页面都会绑定一次监听，导致getList执行多次。

设置后一定要销毁，否则监听会一直存在。

设置定时器

setinterval 不会自动关闭
在要设置定时器的地方

this.timer = setInterval(function() {
  self.getList()
}, 1000 * 60)

定时器最好不要直接写在mounted，建议写在methods里
然后一定要销毁定时器，避免浪费资源。
也可以在methods中销毁定时器，但是不销毁的话就会一直执行

beforeDestroy(){
  if (this.timer) {
     clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
   }
 },

addEventListener监听

在一个项目的页面中嵌入另一个项目的页面，需要实现父子，子父页面的通信。
window.postMessage() 方法可以安全地实现跨源通信。
但是一定要清除监听

页面监听一般写在mounted中

window.addEventListener('message', this.getList)
this.iframeWin = this.$refs.iframe.contentWindow  //获取到iframe的contentWindow属性

iframe与页面间传消息一般采用postMessage

// 向父vue页面发送信息
this.iframeWin.postMessage({
  cmd:'writeDeviceName',
  params:{
    data:{
      msg:this.msg
    }
  },
}, '*')

beforeRouteLeave：离开路由之前执行的函数,可用于页面的反向传值，页面跳转。
离开路由前销毁监听，也可以写在methods中，自行判断并销毁

beforeRouteLeave(to,from,next){
  window.removeEventListener('message', this.handleMessage)
  next()
},