日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Vue中使用的EventBus有生命周期

最近遇到了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)存占用:

Vue中使用的EventBus有生命周期

圖1

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

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

Vue中使用的EventBus有生命周期

圖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)存快照:

Vue中使用的EventBus有生命周期

發(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