keep-alive用來緩存組件,避免了每次點(diǎn)擊其他頁(yè)面都要加載,減少性能消耗和提高用戶體驗(yàn)，下圖緩存整個(gè)路由視圖(所有頁(yè)面)跋炕，也可以緩存單個(gè)組件
圖片懶加載用了vue-lazyload組件，npm安裝：npm i vue-lazyload -S?
我是全局引用的塘淑，所以在main.js里引用vue-lazyload
之后在需要懶加載的圖片上把src換成v-lazy
? ?效果如圖
當(dāng)訪問一個(gè)頁(yè)面的時(shí)候痒筒，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請(qǐng)求一次，俗稱占位圖）肩狂，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)，才設(shè)置圖片正真的路徑姥饰，讓圖片顯示出來傻谁。這就是圖片懶加載，因?yàn)楹芏囗?yè)面列粪，內(nèi)容很豐富审磁，頁(yè)面很長(zhǎng)，圖片較多岂座。比如說各種商城頁(yè)面态蒂。這些頁(yè)面圖片數(shù)量多，而且比較大费什，少說百來K钾恢，多則上兆。要是頁(yè)面載入就一次性加載完畢。估計(jì)大家都會(huì)等到黃花變成黃花菜了瘩蚪。當(dāng)用戶網(wǎng)速慢時(shí)泉懦，可以先顯示一張loading的動(dòng)態(tài)圖，預(yù)先讓用戶有心理準(zhǔn)備疹瘦，否則打開后一片空白會(huì)使得用戶體驗(yàn)變差崩哩。
