vue的keep-alive中使用EventBus的方法


Posted in Javascript onApril 23, 2019

最近项目中由于列表居多且都做了下拉刷新上拉加载,所以就使用了keep-alive组件来缓存页面数据,但是当在其他页面做一些操作改变了列表数据,当来到列表的时候每次都要下拉刷新一下,体验不好,所以就使用到了EventBus,在需要更新的时候就用EventBus来刷新列表。

1.keep-alive组件

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。但是对于展示型页面比较好用,表单类页面也会将所填数据保存起来,对于那种表单没提交又需要保存所填数据的场景非常实用。

keep-alive所缓存的页面只会执行一次created和mounted,也就是在第一次进入才会执行。但是又会多两个生命周期,分别是activated、deactivated,activated在每次进入执行而deactivated在每次离开前执行。 当然有些页面不需要缓存,就要进行一些处理,这里就不多讲了,因为估计大家都知道(不知道百度去...)。

2.EventBus(事件总线)

EventBus用于实现组件之间的数据通讯,使用起来非常之简单。只需要在main.js中加入以下代码:

Vue.prototype.$eventBus = new Vue();

上面代码就创建了一个全局EventBus,其实就是一个vue实例。

这样我们就可以在各个页面中使用了。

在页面中使用 $emit 方法就可以触发事件,然后组件中使用 $on 方法就可以监听对应事件,这个和组件之间传值是一样的。不过这个可以在非父子组件中传递状态,和vuex差不多。当然这种方法在简单应用中可以使用,复杂的应用应该使用 vuex ,这样方便管理和维护。

this.$eventBus.$emit('msg',data);// 触发事件
this.$eventBus.$on('msg',(data)=>{}) // 监听事件

3.组合使用

这两个我感觉很配,当我们使用keep-alive缓存了页面组件,我们需要在A面来触发B页面的列表刷新或其他方法时,这时候使用EventBus就非常方便,其他方法也可以,比如说使用vuex,但是此时就没有直接使用EventBus方便快捷了。 当我们在页面中使用了 this.$eventBus.$on 去监听一个事件,只要页面被缓存,就可以监听到其他页面触发的事件。这样我们就可以减少一些不必要的请求,而且在需要更新的时候去更新,也可以做一些其他的操作,简直美滋滋。

总结

以上所述是小编给大家介绍的vue的keep-alive中使用EventBus的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
webpack入门必知必会
Jan 16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
js继承的这6种方式!(上)
Apr 23 #Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 #Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 #Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 #Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 #Javascript
vue watch关于对象内的属性监听
Apr 22 #Javascript
You might like
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python subprocess模块详细解读
2018/01/29 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
毕业学生推荐信
2013/12/01 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
群众路线剖析材料
2014/09/30 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
结婚保证书
2015/01/16 职场文书
报名委托书
2015/01/29 职场文书
管理人员岗位职责
2015/02/14 职场文书
最美乡村教师观后感
2015/06/11 职场文书