vue的keep-alive中使用EventBus

最近项目中因为列表居多且都作了下拉刷新上拉加载，因此就使用了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去监听一个事件，只要页面被缓存，就能够监听到其余页面触发的事件。这样咱们就能够减小一些没必要要的请求，并且在须要更新的时候去更新，也能够作一些其余的操做，简直美滋滋。

第一次发布文章，只是想和你们作一个交流，不足的地方还请大神多多指点。