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

在vue項目中需要監聽window窗口變化來時時計算圖片的高度，于是就加了一個監聽事件；確實監聽到了，但是在離開當前頁面進入其他頁面改變窗口大小時發現window還是處于監聽狀態，即移除監聽事件并沒有生效。

//之前的寫法，這樣寫移除監聽事件無效 mounted(){ window.addEventListener(’resize’,()=>{ ’改變窗口大小時需要做的處理’ }); }, beforeDestroy() { window.removeEventListener('resize'); }

后來查找相關資料后發現用下面這種寫法可以移除監聽

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

補充知識：vue 監聽屏幕變化 & 銷毀監聽事件

記一次小坑.

由于用到 echarts 需要自適應屏幕,所以在vue中用了監聽事件并且考慮到性能問題,所以用lodash 庫的 debounce 做了包裹.代碼如下:

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

然而發現切換到其他的頁面的時候,屏幕改變的時候還是會觸發 resize 事件,因為之前寫過類似功能,代碼是沒有問題的,但是就是會觸發,心里也是覺得奇怪,研究了一下,發現 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 里面.并且內部函數體不能使用箭頭函數,否則會報 this undefined 的問題

以上這篇解決vue 給window添加和移除resize事件遇到的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。