vue項(xiàng)目?jī)?yōu)化之通過(guò)keep-alive數(shù)據(jù)緩存的方法

<keep-alive>是Vue的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

<keep-alive> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

prop:

1. include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
2. exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。

通過(guò)vue提供的keep-alive減少對(duì)服務(wù)器的請(qǐng)求次數(shù)        

VUE2.0中提供了一個(gè)keep-alive方法，可以用來(lái)緩存組件，避免多次加載相應(yīng)的組件，減少性能的消耗。比如， 一個(gè)頁(yè)面的數(shù)據(jù)包括圖片、文字等用戶都已經(jīng)加載完了，然后用戶通過(guò)點(diǎn)擊跳轉(zhuǎn)到了另外一個(gè)界面。然后從另外一個(gè)界面通過(guò)返回又回到了原先的界面。如果沒(méi)有設(shè)置的話，那么原先界面的信息就要重新向服務(wù)器請(qǐng)求得到。而通過(guò)vue提供的keep-alive可以是頁(yè)面的已經(jīng)請(qǐng)求的數(shù)據(jù)得以保存，減少請(qǐng)求的次數(shù)，提高用戶的體驗(yàn)程度。

緩存組件又分為兩種，緩存整個(gè)站點(diǎn)的頁(yè)面的組件或者緩存部分頁(yè)面的組件。

1、緩存所有的頁(yè)面,適用于每個(gè)頁(yè)面都有請(qǐng)求的情況。方法如下，在需要緩存的router-view用keep-alive標(biāo)簽進(jìn)行包裹起來(lái)。

<keep-alive>
<router-view></router-view>
</keep-alive>

將首次觸發(fā)請(qǐng)求寫(xiě)到created鉤子里邊，就能實(shí)現(xiàn)緩存。比如從列表頁(yè)，去了詳情頁(yè)，回來(lái)還是原來(lái)的頁(yè)面。

2、緩存部分組件或者頁(yè)面，使用router.meta這個(gè)屬性通過(guò)判斷的方法可以實(shí)現(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表示不需要緩存 }
 ]

還可以通過(guò)新增的屬性include/exclude來(lái)設(shè)置。見(jiàn)名思意，include包含的意思，exclude除了的意思。這里需要用到組件的名稱即name來(lái)進(jìn)行設(shè)置，所以name肯定就要加上了。  加入 a,b組件需要緩存，c,d組件不需要緩存。寫(xiě)法如下：

<keep-alive include="a,b">
<component></component>
</keep-alive> 
<keep-alive exclude="c,d">
<component></component>
</keep-alive> 

vue項(xiàng)目的優(yōu)化還可以通過(guò)組件的按需加載來(lái)實(shí)現(xiàn)，就像圖片的懶加載一樣，如果客戶根本就沒(méi)有看到那些圖片，而我們卻在打開(kāi)頁(yè)面的時(shí)候全部給加載完了，這樣會(huì)大大的增加請(qǐng)求的時(shí)間，降低用戶的體驗(yàn)程度。懶加載在很多的網(wǎng)站都有用到，比如淘寶、京東等等這樣的購(gòu)物網(wǎng)站，上面的圖片鏈接等等都很多，如果你把滾軸迅速的往下拉的時(shí)候，你可能會(huì)看到圖片加載的情況。具體怎么使用，大家可以看另一篇文章: vue項(xiàng)目?jī)?yōu)化之頁(yè)面的按需加載(vue+webpack)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com