vue項目中銷毀window.addEventListener事件監(jiān)聽解析
更新時間：2022年07月27日 10:19:26 作者：前端小木偶
這篇文章主要介紹了vue項目中銷毀window.addEventListener事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
銷毀window.addEventListener事件監(jiān)聽
今天在做項目的過程中，組件中調(diào)用iframe時，由于在組件的created方法中寫了監(jiān)聽，用于接收iframe發(fā)來的信息，但是在組件銷毀的時候并沒有去掉監(jiān)聽，導致組件創(chuàng)建幾次，監(jiān)聽方法就會執(zhí)行幾次，特此記錄
created() {
? ? window.addEventListener('message', this.receiveMessage, false)
? },beforeDestroy() { // 在組件生命周期結(jié)束的時候銷毀。
? ? window.removeEventListener('message', this.receiveMessage, false)
? },window.addEventListener監(jiān)聽scroll事件
今天想在vue的項目里面用下拉加載，然后就直接寫了:
mounted () {
?? ?window.addEventListener( 'scroll', this.scrollHander)
},
methods: {
?? ?scrollHander () { ?}
}但是我發(fā)現(xiàn)我切換路由以后依舊其他頁面也觸發(fā)了scrollHandler函數(shù)，然后我想到使用了vue-router做的spa項目，window對象不變的，所以需要在每次使用后銷毀。
解決辦法
我回去看了下vue文檔的生命周期，看到了destroyed，然后直接在這個周期內(nèi)銷毀就可以了。
mounted () {
?? ?window.addEventListener('scroll', this.scrollHander)
},
destroyed () {
?? ?window.removeEventListener('scroll', this.scrollHander)
}使用throttle出現(xiàn)的新問題
下拉加載一般需要配合throttle限流函數(shù)(原理可以看這里)來避免頻繁觸發(fā)，所以優(yōu)化代碼成這樣：
mounted () {
?? ?let ?_this = this
?? ?window.addEventListener('scroll', throttle(() => {
?? ??? ?_this.scrollHander()
?? ?},200 ))
},然后發(fā)現(xiàn)沒法用removeEventListener了，因為這個函數(shù)第二個參數(shù)不接受匿名函數(shù)。
最后代碼
用一個變量中轉(zhuǎn)下
mounted () {
?? ?let ?_this = this
?? ?this.throttleLoad = throttle(() =>{
?? ??? ?_this.scrollHander()
?? ?},200)
?? ?window.addEventListener('scroll', this.throttleLoad)
},
destroyed () {
?? ?window.removeEventListener('scroll',this.throttleLoad)?
},
methods: {?
?? ?scrollHander () { }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router啟用history模式下的開發(fā)及非根目錄部署方法
這篇文章主要介紹了vue-router啟用history模式下的開發(fā)及非根目錄部署方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關(guān)于前端Vue項目國際化解決方案的實戰(zhàn)記錄,以上只是一部分Vue項目開發(fā)中遇到的典型問題和解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue3?Reactive響應式原理邏輯詳解，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)計算器的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學習
這篇文章主要為大家介紹了Vue.js基礎(chǔ)之監(jiān)聽子組件事件v-on及綁定數(shù)據(jù)v-model學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue中v-for和v-if不能在同一個標簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個標簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
說到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時清理keepalive緩存方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了Vue單文件組件開發(fā)實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
progressbar組件在一個可以直接運行的npm包，通過Yeoman進行構(gòu)建，再通過Gulp+Webpack構(gòu)建工具。這篇文章給大家介紹了Vue進度條progressbar組件2018-04-04
這篇文章主要為大家詳細介紹了Vue+Openlayers實現(xiàn)實時坐標點展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03