最近遇到了vue項目中的性能問題，整個項目不斷的進行操作五分鐘左右，頁面已經很卡，查看頁面占用了1.5G內存，經過排查一部分原因，是自己模塊使用的eventBus在離開頁面未進行off掉。我們進行下驗證：
1、不隨生命周期銷毀
我們在home首頁的代碼是這樣的：
created () { let text = Array(1000000).fill('xxx').join(',') //創建一個大的字符串用于驗證內存占用 $eventBus.$on('home-on', (...args) => { this.text = text }) }, mounted () { setTimeout(() => { $eventBus.$emit('home-on', '這是home $emit參數', 'ee') }, 1000) }, beforeDestroy () { // 注意這里沒有off掉'home-on'的訂閱事件 } // eventBus是全局的(1)在home頁時：我們拍個內存快照查看下home頁的內存占用：
圖1
一共17.4M我們創建出的字符串text占用了8M，這在home頁沒銷毀時是正常的
(2)離開home頁時：然后我們點擊跳轉到其他頁面離開home頁，然后再拍個內存快照：
圖2
創建的'xxx,xxx...'字符串是home頁面掛載在this.text上的，離開了home依然存在著，查看下面的箭頭看到是存在了EventBus上，原因很明顯，是我們在beforeDestroy的時候沒把訂閱的事件給銷毀掉，而EventBus是全局的，造訂閱的on的回調里調用了this.text，因此回調里的this就一直掛在了EventBus里。
2、隨著生命周期銷毀
created () { let text = Array(1000000).fill('xxx').join(',') //創建一個大的字符串用于驗證內存占用 $eventBus.$on('home-on', (...args) => { this.text = text }) }, mounted () { setTimeout(() => { $eventBus.$emit('home-on', '這是home $emit參數', 'ee') }, 1000) }, beforeDestroy () { $eventBus.$off('home-on') // 注意這里off掉了'home-on'的訂閱事件 } // eventBus是全局的(1)在home頁時：內存快照不用多說自然是圖1的內存快照
(2)離開home頁時：再來拍個內存快照：
發現減到了10M，且通過內存占用看到'string'里已經沒有'xxx,xxx...'的內存占用了，這說明我們銷毀之后瀏覽器回收了this.text。
好，以上說這么多只是說明在使用EventBus時要時刻注意訂閱事件的銷毀。如果有一個還好，如果有5個，6個...也要挨個銷毀這就比較麻煩了。話說off銷毀這件重復性勞動這些都應該是機器做的事情，我們不應該去關心的。
基于以上我們自然就想到讓EventBus隨著生命周期銷毀就行了嘛。EventBus有生命周期的特性那么就離不開在使用.$on的this的關聯，每個Vue組件有自己的_uid作為唯一標識，因此我們基于uid稍微改造下EventBus，讓EventBus和_uid關聯起來:
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) // 把每個_uid訂閱的事件名字push到各自uid所屬的數組里 } $on (eventName, callback, vm) { // vm是在組件內部使用時組件當前的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)進行使用let $EventBus = {}$EventBus.install = (Vue, option) => { Vue.prototype.$eventBus = new EventBus(Vue) Vue.mixin({ beforeDestroy () { this.$eventBus.$offVmEvent(this._uid) // 攔截beforeDestroy鉤子自動銷毀自身所有訂閱的事件 } })}export default $EventBus下面來進行使用
// 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) // 注意第三個參數需要傳當前組件的this，如果不傳則需要手動銷毀 }, mounted () { setTimeout(() => { this.$eventBus.$emit('home-on', '這是home $emit參數', 'ee') }, 1000) }, beforeDestroy () { // 這里就不需要手動的off銷毀eventBus訂閱的事件了 }總結
以上所述是小編給大家介紹的Vue中使用的EventBus有生命周期，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
