解決vue 給window添加和移除resize事件遇到的坑
在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)文章
vue el-switch綁定數(shù)值時(shí)需要注意的問(wèn)題
在Vue中使用`el-switch`組件時(shí),綁定數(shù)值類(lèi)型時(shí)應(yīng)使用布爾值（true/false）,而綁定字符串類(lèi)型時(shí)應(yīng)使用字符串（'true'/'false'）2024-12-12
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue-cli3搭建項(xiàng)目的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue.js仿hover效果的實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue.js仿hover效果的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
vue中modal傳輸數(shù)據(jù)并刷新部分頁(yè)面數(shù)據(jù)方式
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁(yè)面數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue提示框組件vue-notification使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
有時(shí)候我們使用el-table的選擇框時(shí),如果涉及修改、刪除時(shí),可能一次只允許用戶(hù)選擇一條,這樣的話如果使用頂部的全選復(fù)選框就不合適了,這篇文章主要給大家介紹了關(guān)于el-table表頭全選框隱藏或禁用設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue如何實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面
這篇文章主要介紹了vue如何實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))
這篇文章主要介紹了vue-router如何實(shí)時(shí)動(dòng)態(tài)替換路由參數(shù)(地址欄參數(shù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10