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 相关文章推荐
js一组验证函数
Dec 20 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
详解参数传递四种形式
Jul 21 Javascript
js密码强度校验
Nov 10 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
js getBoundingClientRect使用方法详解
Jul 17 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 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
JS常见算法详解
2017/02/28 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python修改字典内key对应值的方法
2015/07/11 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python如何用filter函数筛选数据
2020/03/05 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
2014春晚主持词
2014/03/25 职场文书
政治学求职信
2014/06/03 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
中学音乐课教学反思
2016/02/18 职场文书