一、場景描述
專案中常見的乙個場景是:
主頁->列表頁->詳情頁層層深入,詳情頁->列表頁->主頁層層返回。
為了提公升使用者體驗和效能,我們希望可以動態快取列表頁面:
從詳情頁->列表頁時,用快取中的列表頁,不用重新請求資料。
從列表頁->主頁時,登出掉列表頁,再進入列表頁時,獲取最新的資料。
現在,我們用keep-alive來實現這個功能。
二、keep-alive知識回顧
官方文件這樣介紹keep-alive
keep-alive
用法:包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和
相似,
是乙個抽象元件:它自身不會渲染乙個 dom 元素,也不會出現在元件的父元件鏈中。
當元件在內被切換,它的
activated
和deactivated
這兩個生命週期鉤子函式將會被對應執行。
三、功能實現
01定義router
用keepalive表示路由對應的元件是否需要快取、deepth表示當前路由的層級。
**:
02export default new router(,
component: index},,
component: list},,
component: detail
}]})
按需快取router-view
keep-alive元件的include屬性表示只有name匹配的元件會被快取。我們可以動態修改include屬性的值來實現按需快取。
如果要to(進入)的頁面是需要keepalive快取的,把to.name push進includearr陣列。
如果要form(離開)的頁面是keepalive快取的,再根據deepth來判斷是前進還是後退。如果是後退,刪除掉includearr陣列裡from.name,也就是登出掉快取元件。
注意:keep-alive元件的include屬性匹配的是元件的name值,includearr陣列存的是router的name值,所以,我們要把router的name屬性設定成router對應元件的name一樣的。$route (to, from)
// 如果 要 form(離開) 的頁面是 keepalive快取的,再根據 deepth 來判斷是前進還是後退,如果是後退,需要登出快取的元件。
if (from.meta.keepalive && to.meta.deepth
}
完整**:
list
detail
這樣就實現了按需動態keep-alive。
四、效果
開啟vue-devtool裡注意觀察list元件的變化(灰色為快取狀態的元件)。
1.從首頁進入列表頁:list元件被快取,執行以下生命週期函式;
beforecreate
created
beforemount
mounted
activated
2.從列表頁進入詳情頁:list元件並沒有被登出,執行以下生命週期函式;
deactivated
3.從詳情頁再返回列表頁:沒有重新渲染list元件,用的是快取中的list元件,執行以下生命週期函式;
activated
4.從列表頁返回首頁:快取的list元件被登出,執行以下生命週期函式;
deactivated
beforedestroy
destroyed
5.再次從首頁進入列表頁:重新渲染list元件,list元件執行以下生命週期函式;
VUE實現頁面快取的解決方案 keep alive
三 注意事項 一 背景 在實際開發中,對於spa類的單頁面應用,乙個頁面就是乙個元件的概念,預設情況下,在我們開啟乙個新頁面的時候,為了記憶體的不浪費,不會快取上乙個頁面,但是一些時候我們的pm會給我們提一些需求,比如 1.列表頁面,我進行過濾之後跳轉,返回還能看到過濾的內容 2.列表頁面,我滾動道...
vue 路由 按需 keep alive
思路如下圖 寫2個router view出口 複製 在router裡定義好需要快取的檢視元件 new router 複製 我們從官方文件提供的api入手,keep alive元件如果設定了include,就只有和include匹配的元件會被快取,所以思路就是,動態修改include陣列來實現按需快取...
vant在Vue頁面內實現按需引入
參考 參考npm i vant sbabel plugin import 是一款 babel 外掛程式,它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 安裝外掛程式 npm i babel plugin import d在.babelrc中配置plugins 外掛程式 plugin...