快捷導(dǎo)航

Vue中使用的EventBus有生命周期

更新時(shí)間：2018年07月12日 14:18:44 投稿：mrr

這篇文章主要介紹了Vue中使用的EventBus有生命周期的相關(guān)知識，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

最近遇到了vue項(xiàng)目中的性能問題，整個(gè)項(xiàng)目不斷的進(jìn)行操作五分鐘左右，頁面已經(jīng)很卡，查看頁面占用了1.5G內(nèi)存，經(jīng)過排查一部分原因，是自己模塊使用的eventBus在離開頁面未進(jìn)行off掉。我們進(jìn)行下驗(yàn)證：

1、不隨生命周期銷毀

我們在home首頁的代碼是這樣的：

 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頁時(shí)：我們拍個(gè)內(nèi)存快照查看下home頁的內(nèi)存占用：

圖1

一共17.4M我們創(chuàng)建出的字符串text占用了8M，這在home頁沒銷毀時(shí)是正常的

(2)離開home頁時(shí)：然后我們點(diǎn)擊跳轉(zhuǎn)到其他頁面離開home頁，然后再拍個(gè)內(nèi)存快照：

圖2

創(chuàng)建的'xxx,xxx...'字符串是home頁面掛載在this.text上的，離開了home依然存在著，查看下面的箭頭看到是存在了EventBus上，原因很明顯，是我們在beforeDestroy的時(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頁時(shí)：內(nèi)存快照不用多說自然是圖1的內(nèi)存快照

(2)離開home頁時(shí)：再來拍個(gè)內(nèi)存快照：

發(fā)現(xiàn)減到了10M，且通過內(nèi)存占用看到'string'里已經(jīng)沒有'xxx,xxx...'的內(nèi)存占用了，這說明我們銷毀之后瀏覽器回收了this.text。

好，以上說這么多只是說明在使用EventBus時(shí)要時(shí)刻注意訂閱事件的銷毀。如果有一個(gè)還好，如果有5個(gè)，6個(gè)...也要挨個(gè)銷毀這就比較麻煩了。話說off銷毀這件重復(fù)性勞動(dòng)這些都應(yīng)該是機(jī)器做的事情，我們不應(yīng)該去關(guān)心的。

基于以上我們自然就想到讓EventBus隨著生命周期銷毀就行了嘛。EventBus有生命周期的特性那么就離不開在使用.$on的this的關(guān)聯(lián)，每個(gè)Vue組件有自己的_uid作為唯一標(biāo)識，因此我們基于uid稍微改造下EventBus，讓EventBus和_uid關(guān)聯(lián)起來:

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到各自uid所屬的數(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

下面來進(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有生命周期，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: