Vue中使用的EventBus有生命周期


Posted in Javascript onJuly 12, 2018

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

Vue中使用的EventBus有生命周期

图1

一共17.4M我们创建出的字符串text占用了8M,这在home页没销毁时是正常的

(2)离开home页时:然后我们点击跳转到其他页面离开home页,然后再拍个内存快照:

Vue中使用的EventBus有生命周期

图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页时:再来拍个内存快照:

Vue中使用的EventBus有生命周期

发现减到了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有生命周期,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
详解Bootstrap按钮
Jan 04 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 #Javascript
vue实现引入本地json的方法分析
Jul 12 #Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 #jQuery
JS实现将二维数组转为json格式字符串操作示例
Jul 12 #Javascript
vue路由组件按需加载的几种方法小结
Jul 12 #Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 #jQuery
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 #Javascript
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
php依赖注入知识点详解
2019/09/23 PHP
xmlHTTP实例
2006/10/24 Javascript
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python实现按行切分文本文件的方法
2016/04/18 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
virtualenv介绍及简明教程
2020/06/23 Python
市场营销调查计划书
2014/05/02 职场文书
英语专业自荐书
2014/06/13 职场文书
廉政教育的心得体会
2014/09/01 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
抢劫罪辩护词
2015/05/21 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书