keep-alive的介紹及使用

定義：

• 如果需要頻繁切換路由，這個時候就可以考慮用keep-alive了，來達到避免數據的重複請求的目的
• keep-alive用來緩存組件,避免多次加載相應的組件,減少性能消耗。
• 簡單一點來說就是從頁面A鏈接到其他頁面後回退到頁面A不用在重新執行頁面A的created生命週期的代碼，只會從緩存中加載之前已經緩存的頁面A

Props

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
max - 數字。最多可以緩存多少組件實例。

一、用法介紹

• keep-alive是一個內置組件和類似
• keep-alive組件提供了include與exclude兩個屬性來允許組件有條件地進行緩存，二者都可以用逗號分隔字符串、正則表達式或一個數組來表示
• keep-alive提供了兩個生命鉤子，分別是activated與deactivated。因爲keep-alive會將組件保存在內存中，並不會銷燬以及重新創建，所以不會重新調用組件的created等方法，需要用activated與deactivated這兩個生命鉤子來得知當前組件是否處於活動狀態。
• 第一次爲調取緩存的加載順序，開啓了keep-alive後，當再次進入（前進或者後退）時，只觸發activated，退出時觸發deactivated。 beforeCreate->created->beforeMount-> mounted-> activated

二、使用介紹

1. 使用router. meta屬性

//router.js文件路由設置
{
    path: '/keep_alive_test',
    component: () => import('@/views/keepAliveTest.vue'),
    meta: {
        title: 'keepAlive測試',
        keepAlive: true//使用（通過路由meta的keepAlive屬性決定那個頁面使用緩存）
    }
},
//App.vue文件
<keep-alive :include="'componentA'">
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>

2. 使用include，exclude屬性（不需要設置路由，需要設置組件名字，這裏組件名字非路由組件名而是定義組件的名稱）

//App.vue文件
<keep-alive :include="pages" exclude="componentB">
<router-view/>
</keep-alive>
data () {
return {
pages: ['componentA', 'componentC']
}
}
//這裏的component組件內容就會被緩存,name爲componentA\componentC的組件將會被緩存。name爲componentB的組件將不會被緩存。
//!!!!include和exclude的組件名字必須是組件定義的name

三、注意事項

• keep-alive組件使用針對的是頁面組件！！！！
• 使用keep-alive 的組件不會再次觸發created鉤子函數
• 使用keep-alive，調用 $destory() 需要謹慎，否則頁面不再被緩存
• include 和exclude的組件名字必須是組件定義的name，而不是路由裏面定義的名字