您好,登錄后才能下訂單哦!
<keep-alive>是Vue的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM。
<keep-alive> 包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition> 相似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現(xiàn)在父組件鏈中。
prop:
通過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)簽進行包裹起來。
<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來進行設(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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。