1. 為什么需要緩存組件:
理解:
- 默認(rèn)情況下,在切換路由時(shí),路由對(duì)應(yīng)的組件會(huì)被重新創(chuàng)建或銷毀,每次切換的路由都是新創(chuàng)
- 如果可以緩存路由組件,將可以提高用戶體
- 例如用戶在登錄時(shí),輸入用戶名,切換到了其他路由,回來時(shí),原來輸入內(nèi)容還在,會(huì)怎樣
2. keep-alive緩存組件
keep-alive 是Vue內(nèi)置的組件,可以是被包含的組件被緩存,保留組件的狀態(tài),避免重新渲染
router-view 組件,如果被包裹在keep-alive里面,所以路徑匹配的組件都會(huì)被緩存
編程方式:
<keep-alive>
<router-view></router-view>
</keep-alive>
這樣在每次切換組件時(shí),組件不會(huì)被銷毀, 組件中的狀態(tài)得以報(bào)錯(cuò)
3. 鉤子函數(shù)
說明
- 在最初學(xué)習(xí)組件的生命周期時(shí),學(xué)習(xí)過8個(gè)鉤子函數(shù)
- 如果使用
keep-alive組件將會(huì)多出兩個(gè)鉤子函數(shù)分別為activated和deactivated -
activated被激活, 表示被緩存的組件激活使用, 當(dāng)前處于活躍狀態(tài) -
deactivated被活化,表示當(dāng)前組件雖然被緩存,但是不是處于活躍狀態(tài)
示例:
<script>
export default {
name:"Home",
activated(){
console.log("actived");
},
deactivated(){
console.log("desactived");
}
}
</script>
4. keep-alive重要的兩個(gè)屬性
4.1 組件緩存的問題
講這兩個(gè)重要屬性前,先理解下面幾個(gè)問題
- 緩存組件可以提升用戶體驗(yàn),
- 比如: 登錄輸入的內(nèi)容,當(dāng)切換其他路由再回來是,還保留之前輸?shù)?/li>
- 但是有必要所有的組件都需要緩存嗎?
- 是想一下,如果一個(gè)組件的數(shù)據(jù)需要實(shí)時(shí)跟后臺(tái)數(shù)據(jù)同步,如果被緩存可能就不會(huì)發(fā)送ajax
- 也就不會(huì)實(shí)時(shí)獲取最新的數(shù)據(jù)
- 可以我們也知道,
keep-alive包裹的router-view組件位置的所有組件都會(huì)被緩存 - 如果喜歡某些組件不需要被緩存應(yīng)該如何處理
4.2 keep-alive兩個(gè)非常重要的屬性:
-
include字符串或正則表達(dá)式, 只有匹配的組件會(huì)被緩存 -
exclude字符串或正則表達(dá)式,任何匹配成功個(gè)組件都不會(huì)被緩存,用的比較多
示例:
通過組件名來排除一些不需要緩存的組件
<keep-alive exclude="About">
<router-view></router-view>
</keep-alive>
此時(shí)通過exclude屬性將About組件排除在緩存之外.
