国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Vue中使用的EventBus有生命周期

2019-11-19 13:30:12
字體:
來源:轉載
供稿:網友

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 彭泽县| 仪陇县| 安达市| 崇左市| 集贤县| 富宁县| 濮阳县| 上虞市| 隆德县| 若尔盖县| 赣州市| 东宁县| 中江县| 桑植县| 巩义市| 伊春市| 仁寿县| 郸城县| 乡宁县| 清苑县| 宝丰县| 陇川县| 鱼台县| 伊川县| 遵义县| 彭阳县| 攀枝花市| 筠连县| 高碑店市| 会东县| 北京市| 东乡族自治县| 眉山市| 鹿泉市| 若尔盖县| 顺平县| 雷波县| 左云县| 卢湾区| 福鼎市| 营口市|