欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue 給window添加和移除resize事件遇到的坑

 更新時(shí)間：2020年07月21日 15:29:50   作者：qq_43561241  
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

在vue項(xiàng)目中需要監(jiān)聽(tīng)window窗口變化來(lái)時(shí)時(shí)計(jì)算圖片的高度，于是就加了一個(gè)監(jiān)聽(tīng)事件；確實(shí)監(jiān)聽(tīng)到了，但是在離開(kāi)當(dāng)前頁(yè)面進(jìn)入其他頁(yè)面改變窗口大小時(shí)發(fā)現(xiàn)window還是處于監(jiān)聽(tīng)狀態(tài)，即移除監(jiān)聽(tīng)事件并沒(méi)有生效。

  //之前的寫(xiě)法，這樣寫(xiě)移除監(jiān)聽(tīng)事件無(wú)效
  mounted(){
    window.addEventListener('resize',()=>{
      '改變窗口大小時(shí)需要做的處理'
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize");
  }

后來(lái)查找相關(guān)資料后發(fā)現(xiàn)用下面這種寫(xiě)法可以移除監(jiān)聽(tīng)

  methods: {
    listenResize(){
      '窗口大小改變時(shí)的操作'
    }
  },
  mounted(){
    window.addEventListener('resize',this.listenResize); 
  },
  beforeDestroy() {
    window.removeEventListener("resize",this.listenResize);
  }

補(bǔ)充知識(shí)：vue 監(jiān)聽(tīng)屏幕變化 & 銷(xiāo)毀監(jiān)聽(tīng)事件

記一次小坑.

由于用到 echarts 需要自適應(yīng)屏幕,所以在vue中用了監(jiān)聽(tīng)事件并且考慮到性能問(wèn)題,所以用lodash 庫(kù)的 debounce 做了包裹.代碼如下:

mounted() {
  window.addEventListener('resize', debounce(this.resize,200), true)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resize, true)
},
methods: {
  resize() {
   this.radarChart.resize()
  }
}

然而發(fā)現(xiàn)切換到其他的頁(yè)面的時(shí)候,屏幕改變的時(shí)候還是會(huì)觸發(fā) resize 事件,因?yàn)橹皩?xiě)過(guò)類(lèi)似功能,代碼是沒(méi)有問(wèn)題的,但是就是會(huì)觸發(fā),心里也是覺(jué)得奇怪,研究了一下,發(fā)現(xiàn) addEventListener 的方法里面不加 debounce 就可以了.如下:

mounted() {
  window.addEventListener('resize', this.resize, true)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resize, true)
},
methods: {
  resize: debounce(function() {
   this.radarChart.resize()
  }, 300),
 }

debounce 需要加在 methods 里面.并且內(nèi)部函數(shù)體不能使用箭頭函數(shù),否則會(huì)報(bào) this undefined 的問(wèn)題

以上這篇解決vue 給window添加和移除resize事件遇到的坑就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論