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
去監聽一個事件，只要頁面被快取，就可以監聽到其他頁面觸發的事件。這樣我們就可以減少一些不必要的請求，而且在需要更新的時候去更新，也可以做一些其他的操作，簡直美滋滋。
第一次釋出文章，只是想和大家做一個交流，不足的地方還請大神多多指點。