溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近遇到了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有生命周期，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
