新聞中心
最近遇到了vue項(xiàng)目中的性能問(wèn)題,整個(gè)項(xiàng)目不斷的進(jìn)行操作五分鐘左右,頁(yè)面已經(jīng)很卡,查看頁(yè)面占用了1.5G內(nèi)存,經(jīng)過(guò)排查一部分原因,是自己模塊使用的eventBus在離開頁(yè)面未進(jìn)行off掉。我們進(jìn)行下驗(yàn)證:
成都創(chuàng)新互聯(lián)公司是專業(yè)的雁峰網(wǎng)站建設(shè)公司,雁峰接單;提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行雁峰網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
1、不隨生命周期銷毀
我們?cè)趆ome首頁(yè)的代碼是這樣的:
created () { let text = Array(1000000).fill('xxx').join(',') //創(chuàng)建一個(gè)大的字符串用于驗(yàn)證內(nèi)存占用 $eventBus.$on('home-on', (...args) => { this.text = text }) }, mounted () { setTimeout(() => { $eventBus.$emit('home-on', '這是home $emit參數(shù)', 'ee') }, 1000) }, beforeDestroy () { // 注意這里沒有off掉'home-on'的訂閱事件 } // eventBus是全局的
(1)在home頁(yè)時(shí):我們拍個(gè)內(nèi)存快照查看下home頁(yè)的內(nèi)存占用:
圖1
一共17.4M我們創(chuàng)建出的字符串text占用了8M,這在home頁(yè)沒銷毀時(shí)是正常的
(2)離開home頁(yè)時(shí):然后我們點(diǎn)擊跳轉(zhuǎn)到其他頁(yè)面離開home頁(yè),然后再拍個(gè)內(nèi)存快照:
圖2
創(chuàng)建的'xxx,xxx...'字符串是home頁(yè)面掛載在this.text上的,離開了home依然存在著,查看下面的箭頭看到是存在了EventBus上,原因很明顯,是我們?cè)赽eforeDestroy的時(shí)候沒把訂閱的事件給銷毀掉,而EventBus是全局的,造訂閱的on的回調(diào)里調(diào)用了this.text,因此回調(diào)里的this就一直掛在了EventBus里。
2、隨著生命周期銷毀
created () { let text = Array(1000000).fill('xxx').join(',') //創(chuàng)建一個(gè)大的字符串用于驗(yàn)證內(nèi)存占用 $eventBus.$on('home-on', (...args) => { this.text = text }) }, mounted () { setTimeout(() => { $eventBus.$emit('home-on', '這是home $emit參數(shù)', 'ee') }, 1000) }, beforeDestroy () { $eventBus.$off('home-on') // 注意這里off掉了'home-on'的訂閱事件 } // eventBus是全局的
(1)在home頁(yè)時(shí):內(nèi)存快照不用多說(shuō)自然是圖1的內(nèi)存快照
(2)離開home頁(yè)時(shí):再來(lái)拍個(gè)內(nèi)存快照:
發(fā)現(xiàn)減到了10M,且通過(guò)內(nèi)存占用看到'string'里已經(jīng)沒有'xxx,xxx...'的內(nèi)存占用了,這說(shuō)明我們銷毀之后瀏覽器回收了this.text。
好,以上說(shuō)這么多只是說(shuō)明在使用EventBus時(shí)要時(shí)刻注意訂閱事件的銷毀。如果有一個(gè)還好,如果有5個(gè),6個(gè)...也要挨個(gè)銷毀這就比較麻煩了。話說(shuō)off銷毀這件重復(fù)性勞動(dòng)這些都應(yīng)該是機(jī)器做的事情,我們不應(yīng)該去關(guān)心的。
基于以上我們自然就想到讓EventBus隨著生命周期銷毀就行了嘛。EventBus有生命周期的特性那么就離不開在使用.$on的this的關(guān)聯(lián),每個(gè)Vue組件有自己的_uid作為唯一標(biāo)識(shí),因此我們基于uid稍微改造下EventBus,讓EventBus和_uid關(guān)聯(lián)起來(lái):
class EventBus { constructor (vue) { if (!this.handles) { Object.defineProperty(this, 'handles', { value: {}, enumerable: false }) } this.Vue = vue this.eventMapUid = {} // _uid和EventName的映射 } setEventMapUid (uid, eventName) { if (!this.eventMapUid[uid]) this.eventMapUid[uid] = [] this.eventMapUid[uid].push(eventName) // 把每個(gè)_uid訂閱的事件名字push到各自u(píng)id所屬的數(shù)組里 } $on (eventName, callback, vm) { // vm是在組件內(nèi)部使用時(shí)組件當(dāng)前的this用于取_uid if (!this.handles[eventName]) this.handles[eventName] = [] this.handles[eventName].push(callback) if (vm instanceof this.Vue) this.setEventMapUid(vm._uid, eventName) } $emit () { // console.log('EventBus emit eventName===', eventName) let args = [...arguments] let eventName = args[0] let params = args.slice(1) if (this.handles[eventName]) { let len = this.handles[eventName].length for (let i = 0; i < len; i++) { this.handles[eventName][i](...params) } } } $offVmEvent (uid) { let currentEvents = this.eventMapUid[uid] || [] currentEvents.forEach(event => { this.$off(event) }) } $off (eventName) { delete this.handles[eventName] } } // 下面寫成Vue插件形式,直接引入然后Vue.use($EventBus)進(jìn)行使用 let $EventBus = {} $EventBus.install = (Vue, option) => { Vue.prototype.$eventBus = new EventBus(Vue) Vue.mixin({ beforeDestroy () { this.$eventBus.$offVmEvent(this._uid) // 攔截beforeDestroy鉤子自動(dòng)銷毀自身所有訂閱的事件 } }) } export default $EventBus
下面來(lái)進(jìn)行使用
// main.js中 ... import EventBus from './eventBus.js' Vue.use(EnemtBus) ...
組件中使用:
created () { let text = Array(1000000).fill('xxx').join(',') this.$eventBus.$on('home-on', (...args) => { console.log('home $on====>>>', ...args) this.text = text }, this) // 注意第三個(gè)參數(shù)需要傳當(dāng)前組件的this,如果不傳則需要手動(dòng)銷毀 }, mounted () { setTimeout(() => { this.$eventBus.$emit('home-on', '這是home $emit參數(shù)', 'ee') }, 1000) }, beforeDestroy () { // 這里就不需要手動(dòng)的off銷毀eventBus訂閱的事件了 }
總結(jié)
以上所述是小編給大家介紹的Vue中使用的EventBus有生命周期,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)站名稱:Vue中使用的EventBus有生命周期
網(wǎng)頁(yè)地址:http://www.dlmjj.cn/article/gspish.html