vue項目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
<keep-alive>是Vue的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM。
<keep-alive> 包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition> 相似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現(xiàn)在父組件鏈中。
prop:
- include: 字符串或正則表達(dá)式。只有匹配的組件會被緩存。
- exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會被緩存。
通過vue提供的keep-alive減少對服務(wù)器的請求次數(shù)
VUE2.0中提供了一個keep-alive方法,可以用來緩存組件,避免多次加載相應(yīng)的組件,減少性能的消耗。比如, 一個頁面的數(shù)據(jù)包括圖片、文字等用戶都已經(jīng)加載完了,然后用戶通過點擊跳轉(zhuǎn)到了另外一個界面。然后從另外一個界面通過返回又回到了原先的界面。如果沒有設(shè)置的話,那么原先界面的信息就要重新向服務(wù)器請求得到。而通過vue提供的keep-alive可以是頁面的已經(jīng)請求的數(shù)據(jù)得以保存,減少請求的次數(shù),提高用戶的體驗程度。
緩存組件又分為兩種,緩存整個站點的頁面的組件或者緩存部分頁面的組件。
1、緩存所有的頁面,適用于每個頁面都有請求的情況。方法如下,在需要緩存的router-view用keep-alive標(biāo)簽進(jìn)行包裹起來。
<keep-alive> <router-view></router-view> </keep-alive>
將首次觸發(fā)請求寫到created鉤子里邊,就能實現(xiàn)緩存。比如從列表頁,去了詳情頁,回來還是原來的頁面。
2、緩存部分組件或者頁面,使用router.meta這個屬性通過判斷的方法可以實現(xiàn)。方法如下:
<keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-if="! $route.meta.keepAlive"> </router-view>
router設(shè)置如下:
routers:[ { path: '/home', name: home, meta:{keepAlive: true} // 設(shè)置為true表示需要緩存,不設(shè)置或者false表示不需要緩存 } ]
還可以通過新增的屬性include/exclude來設(shè)置。見名思意,include包含的意思,exclude除了的意思。這里需要用到組件的名稱即name來進(jìn)行設(shè)置,所以name肯定就要加上了。 加入 a,b組件需要緩存,c,d組件不需要緩存。寫法如下:
<keep-alive include="a,b"> <component></component> </keep-alive> <keep-alive exclude="c,d"> <component></component> </keep-alive>
vue項目的優(yōu)化還可以通過組件的按需加載來實現(xiàn),就像圖片的懶加載一樣,如果客戶根本就沒有看到那些圖片,而我們卻在打開頁面的時候全部給加載完了,這樣會大大的增加請求的時間,降低用戶的體驗程度。懶加載在很多的網(wǎng)站都有用到,比如淘寶、京東等等這樣的購物網(wǎng)站,上面的圖片鏈接等等都很多,如果你把滾軸迅速的往下拉的時候,你可能會看到圖片加載的情況。具體怎么使用,大家可以看另一篇文章: vue項目優(yōu)化之頁面的按需加載(vue+webpack)
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue里如何主動銷毀keep-alive緩存的組件
- vue 使某個組件不被 keep-alive 緩存的方法
- vuex + keep-alive實現(xiàn)tab標(biāo)簽頁面緩存功能
- vue使用keep-alive實現(xiàn)數(shù)據(jù)緩存不刷新
- vue中keep-alive,include的緩存問題
- keep-alive不能緩存多層級路由菜單問題解決
- 詳解keep-alive + vuex 讓緩存的頁面靈活起來
- vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
- 深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
- vue使用keep-alive后清除緩存的方法
相關(guān)文章
vue 動態(tài)添加class,三個以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue-cli+webpack記事本項目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項目,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04