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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
Javascript 继承机制实例
Aug 12 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
document.createElement()用法
Mar 13 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 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
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python人人网登录应用实例
2014/09/26 Python
Python判断字符串与大小写转换
2015/06/08 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
python中异常捕获方法详解
2017/03/03 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python数据库小程序源代码
2019/09/15 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
Python 实现一个计时器
2020/07/28 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
用python进行视频剪辑
2020/11/02 Python
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
宿舍标语大全
2014/06/19 职场文书
爱护公物演讲稿
2014/09/09 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
飞屋环游记观后感
2015/06/08 职场文书
学生退学证明
2015/06/23 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书