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

网络编程 2024/9/1 佚名

3 2 1

最近项目中由于列表居多且都做了下拉刷新上拉加载，所以就使用了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的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue,keep-alive,vue,ventbus

标签：

vue,keep-alive,vue,ventbus

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“vue的keep-alive中使用EventBus的方法”

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

暂无“vue的keep-alive中使用EventBus的方法”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

20240901

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

vue,keep-alive,vue,ventbus

Vue源码学习之关于对Array的数据侦听实现

深入浅出 Vue 系列 -- 数据劫持实现原理

评论“vue的keep-alive中使用EventBus的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接