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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
layui清空,重置表单数据的实例
Sep 12 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JavaScript类库D
2010/10/24 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
浅谈Python的异常处理
2016/06/19 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
C语言笔试题回忆
2015/04/02 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
安全资金保障制度
2014/01/23 职场文书
总经理助理工作职责
2014/02/06 职场文书
调解协议书
2014/04/16 职场文书
委托证明书
2014/09/17 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
元旦主持词开场白
2015/05/29 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Elasticsearch 数据类型及管理
2022/04/19 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript