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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Python类的动态绑定实现原理
2020/03/21 Python
Django封装交互接口代码
2020/07/12 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
保密承诺书范文
2014/03/27 职场文书
商家认证委托书格式
2014/10/16 职场文书
十佳少年事迹材料
2014/12/25 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
健康教育主题班会
2015/08/14 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
Python 数据可视化之Bokeh详解
2021/11/02 Python
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
Python闭包的定义和使用方法
2022/04/11 Python
Python sklearn分类决策树方法详解
2022/09/23 Python