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