1. 程式人生 > >keep-alive優化網頁性能

keep-alive優化網頁性能

img image .com 技術分享 宋體 style 緩存 ive TP

  1. 每次當點擊城市頁面的按鈕跳轉到首頁都會請求一次數據,這就造成了性能低,

我們在app.vue裏面給 顯示的內容包上 keep-alive

技術分享圖片

2、每次點擊城市取對應的數據渲染到首頁

技術分享圖片

這時候再點擊城市頁面跳轉到首頁 獲取城市數據的問題 出現了(沒有發送請求了,只請求求了第一次的數據),因為keep-alive將數據內容緩存起來了 他直接去取了緩存的內容

技術分享圖片

解決:

當我們在使用 keep-alive組件的時候 vue裏面會多出一個生命周期函數 activated 函數,

這個函數在每次跳轉頁面的時候會執行。

技術分享圖片

技術分享圖片

keep-alive優化網頁性能