Vue中使用的EventBus有生命周期

來源：懂視網責編：小采時間：2020-11-27 22:11:28

Vue中使用的EventBus有生命周期

Vue中使用的EventBus有生命周期:最近遇到了vue項目中的性能問題，整個項目不斷的進行操作五分鐘左右，頁面已經很卡，查看頁面占用了1.5G內存，經過排查一部分原因，是自己模塊使用的eventBus在離開頁面未進行off掉。我們進行下驗證： 1、不隨生命周期銷毀我們在home首頁的代碼是這樣的：

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue中使用的EventBus有生命周期:最近遇到了vue項目中的性能問題，整個項目不斷的進行操作五分鐘左右，頁面已經很卡，查看頁面占用了1.5G內存，經過排查一部分原因，是自己模塊使用的eventBus在離開頁面未進行off掉。我們進行下驗證： 1、不隨生命周期銷毀我們在home首頁的代碼是這樣的：

最近遇到了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有生命周期，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com