如何利用EventBus在Vue的keep-alive组件中实现跨组件通信？

本文共计872个文字，预计阅读时间需要4分钟。

最近项目中，由于列表居中且下拉刷新、上拉加载，使用了keep-alive组件缓存页面数据。但其他页面操作改变了列表数据，列表刷新时每次都需要下拉刷新更新。

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

1.keep-alive组件

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

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

2.EventBus(事件总线)

EventBus用于实现组件之间的数据通讯，使用起来非常之简单。