1. 為什么需要緩存組件:

理解:

1. 默認情況下,在切換路由時,路由對應的組件會被重新創(chuàng)建或銷毀,每次切換的路由都是新創(chuàng)
2. 如果可以緩存路由組件,將可以提高用戶體
   • 例如用戶在登錄時,輸入用戶名,切換到了其他路由,回來時,原來輸入內(nèi)容還在,會怎樣

2. keep-alive緩存組件

keep-alive 是Vue內(nèi)置的組件,可以是被包含的組件被緩存,保留組件的狀態(tài),避免重新渲染

router-view 組件,如果被包裹在keep-alive里面,所以路徑匹配的組件都會被緩存

編程方式:

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

這樣在每次切換組件時,組件不會被銷毀, 組件中的狀態(tài)得以報錯

3. 鉤子函數(shù)

說明

1. 在最初學習組件的生命周期時,學習過8個鉤子函數(shù)
2. 如果使用keep-alive組件將會多出兩個鉤子函數(shù)分別為activated和deactivated
3. activated 被激活, 表示被緩存的組件激活使用, 當前處于活躍狀態(tài)
4. deactivated 被活化,表示當前組件雖然被緩存,但是不是處于活躍狀態(tài)

示例:

<script>
    export default {
        name:"Home",
        activated(){
            console.log("actived");

        },
        deactivated(){
            console.log("desactived");

        }
    }
</script>

4. keep-alive重要的兩個屬性

4.1 組件緩存的問題

講這兩個重要屬性前,先理解下面幾個問題

1. 緩存組件可以提升用戶體驗,
   • 比如: 登錄輸入的內(nèi)容,當切換其他路由再回來是,還保留之前輸?shù)?/li>
2. 但是有必要所有的組件都需要緩存嗎?
   • 是想一下,如果一個組件的數(shù)據(jù)需要實時跟后臺數(shù)據(jù)同步,如果被緩存可能就不會發(fā)送ajax
   • 也就不會實時獲取最新的數(shù)據(jù)
3. 可以我們也知道,keep-alive包裹的router-view組件位置的所有組件都會被緩存
4. 如果喜歡某些組件不需要被緩存應該如何處理

4.2 keep-alive兩個非常重要的屬性:

1. include 字符串或正則表達式, 只有匹配的組件會被緩存
2. exclude 字符串或正則表達式,任何匹配成功個組件都不會被緩存,用的比較多

示例:

通過組件名來排除一些不需要緩存的組件

<keep-alive exclude="About">
    <router-view></router-view>
</keep-alive>

此時通過exclude屬性將About組件排除在緩存之外.