一厚骗、圖片總覽
Snipaste_2020-05-14_13-52-20.png
二、使用細(xì)節(jié)
1.第一次進(jìn)入頁面 created-mouted-activated都會(huì)執(zhí)行 采用alive之后,第二次進(jìn)入頁面只會(huì)執(zhí)行activated
2.activated和deactivated這兩個(gè)生命周期只有在keep-alive的時(shí)候才會(huì)觸發(fā)到
3.刷新頁面的話,所有請(qǐng)求都會(huì)重新執(zhí)行一次,緩沒緩存都一樣
4.點(diǎn)擊瀏覽器返回箭頭不會(huì)刷新頁面.切換路由(不刷新頁面,keep-alive就會(huì)發(fā)揮作用)
三兢哭、keep-alive的其他屬性用法
1.在屬性后面貼組件名稱就可以了
Snipaste_2020-05-14_15-12-26.png
這些屬性的優(yōu)先級(jí)是最高的,比$route.meta.keepAlive高
四领舰、使用注意點(diǎn)
1.在詳情頁被緩存的時(shí)候
具體說明:列表頁,其中每一項(xiàng)都有id.若我點(diǎn)擊id=1的項(xiàng)進(jìn)如它的詳情頁,然后點(diǎn)擊返回.再點(diǎn)擊id=2的項(xiàng)進(jìn)如詳情頁,則詳情頁并不會(huì)重新發(fā)起請(qǐng)求.這時(shí)候id=1與id=2的詳情頁的數(shù)據(jù)是一樣的.
處理方法:
image.png
在詳情頁的代碼中加上這個(gè)這個(gè)生命周期,每次進(jìn)入詳情頁的時(shí)候都獲取實(shí)時(shí)點(diǎn)進(jìn)來的id,并重新請(qǐng)求本頁數(shù)據(jù)