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去監聽一個事件，只要頁面被緩存，就能夠監聽到其餘頁面觸發的事件。這樣咱們就能夠減小一些沒必要要的請求，並且在須要更新的時候去更新，也能夠作一些其餘的操做，簡直美滋滋。

第一次發佈文章，只是想和你們作一個交流，不足的地方還請大神多多指點。