最近項(xiàng)目中由于列表居多且都做了下拉刷新上拉加載，所以就使用了keep-alive組件來緩存頁面數(shù)據(jù)，但是當(dāng)在其他頁面做一些操作改變了列表數(shù)據(jù)，當(dāng)來到列表的時(shí)候每次都要下拉刷新一下，體驗(yàn)不好，所以就使用到了EventBus，在需要更新的時(shí)候就用EventBus來刷新列表。

1.keep-alive組件

keep-alive是Vue提供的一個(gè)抽象組件，用來對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁面渲染完畢后不會(huì)被渲染成一個(gè)DOM元素。但是對(duì)于展示型頁面比較好用，表單類頁面也會(huì)將所填數(shù)據(jù)保存起來，對(duì)于那種表單沒提交又需要保存所填數(shù)據(jù)的場(chǎng)景非常實(shí)用。

keep-alive所緩存的頁面只會(huì)執(zhí)行一次created和mounted，也就是在第一次進(jìn)入才會(huì)執(zhí)行。但是又會(huì)多兩個(gè)生命周期，分別是activated、deactivated，activated在每次進(jìn)入執(zhí)行而deactivated在每次離開前執(zhí)行。 當(dāng)然有些頁面不需要緩存，就要進(jìn)行一些處理，這里就不多講了，因?yàn)楣烙?jì)大家都知道(不知道百度去...)。

2.EventBus(事件總線)

EventBus用于實(shí)現(xiàn)組件之間的數(shù)據(jù)通訊，使用起來非常之簡單。只需要在main.js中加入以下代碼：

Vue.prototype.$eventBus = new Vue();

上面代碼就創(chuàng)建了一個(gè)全局EventBus，其實(shí)就是一個(gè)vue實(shí)例。

這樣我們就可以在各個(gè)頁面中使用了。

在頁面中使用 $emit 方法就可以觸發(fā)事件,然后組件中使用 $on 方法就可以監(jiān)聽對(duì)應(yīng)事件,這個(gè)和組件之間傳值是一樣的。不過這個(gè)可以在非父子組件中傳遞狀態(tài),和vuex差不多。當(dāng)然這種方法在簡單應(yīng)用中可以使用，復(fù)雜的應(yīng)用應(yīng)該使用 vuex ，這樣方便管理和維護(hù)。

this.$eventBus.$emit('msg',data);// 觸發(fā)事件
this.$eventBus.$on('msg',(data)=>{}) // 監(jiān)聽事件

3.組合使用

這兩個(gè)我感覺很配，當(dāng)我們使用keep-alive緩存了頁面組件，我們需要在A面來觸發(fā)B頁面的列表刷新或其他方法時(shí)，這時(shí)候使用EventBus就非常方便，其他方法也可以，比如說使用vuex，但是此時(shí)就沒有直接使用EventBus方便快捷了。 當(dāng)我們?cè)陧撁嬷惺褂昧?code> this.$eventBus.$on 去監(jiān)聽一個(gè)事件，只要頁面被緩存，就可以監(jiān)聽到其他頁面觸發(fā)的事件。這樣我們就可以減少一些不必要的請(qǐng)求，而且在需要更新的時(shí)候去更新，也可以做一些其他的操作，簡直美滋滋。

總結(jié)

以上所述是小編給大家介紹的vue的keep-alive中使用EventBus的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論