vue的keep-alive中使用EventBus

_餘昊_發表於2019-04-21

最近專案中由於列表居多且都做了下拉重新整理上拉載入,所以就使用了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去監聽一個事件,只要頁面被快取,就可以監聽到其他頁面觸發的事件。這樣我們就可以減少一些不必要的請求,而且在需要更新的時候去更新,也可以做一些其他的操作,簡直美滋滋。

第一次釋出文章,只是想和大家做一個交流,不足的地方還請大神多多指點。

相關文章