什么是 keep-alive

在平常開發(fā)中，有部分組件沒有必要多次初始化，這時，我們需要將組件進行持久化，使組件的狀態(tài)維持不變，在下一次展示時，也不會進行重新初始化組件。

也就是說，keepalive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染 。也就是所謂的組件緩存
<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

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

prop:

keep-alive的聲明周期執(zhí)行

頁面第一次進入，鉤子的觸發(fā)順序

created-> mounted-> activated，退出時觸發(fā) deactivated

當再次進入（前進或者后退）時，只觸發(fā) activated

事件掛載的方法等，只執(zhí)行一次的放在 mounted 中；組件每次進去執(zhí)行的方法放在 activated 中；

基本用法

<!--被keepalive包含的組件會被緩存--><keep-alive>  <component><component /></keep-alive>

被keepalive包含的組件不會被再次初始化，也就意味著不會重走生命周期函數(shù)
但是有時候是希望我們緩存的組件可以能夠再次進行渲染，這時 Vue 為我們解決了這個問題
被包含在 keep-alive 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated：

keepalive是一個抽象的組件，緩存的組件不會被 mounted,為此提供activated和deactivated鉤子函數(shù)

參數(shù)理解

keepalive 可以接收3個屬性做為參數(shù)進行匹配對應(yīng)的組件進行緩存:

注：當使用正則表達式或者數(shù)組時，一定要使用 v-bind

<!-- 將（只）緩存組件name為a或者b的組件, 結(jié)合動態(tài)組件使用 --><keep-alive include="a,b"> <component></component></keep-alive><!-- 組件name為c的組件不緩存(可以保留它的狀態(tài)或避免重新渲染) --><keep-alive exclude="c">  <component></component></keep-alive><!-- 使用正則表達式，需使用v-bind --><keep-alive :include="/a|b/"> <component :is="view"></component></keep-alive><!-- 動態(tài)判斷 --><keep-alive :include="includedComponents"> <router-view></router-view></keep-alive><!-- 如果同時使用include,exclude,那么exclude優(yōu)先于include， 下面的例子只緩存a組件 --><keep-alive include="a,b" exclude="b">  <component></component></keep-alive><!-- 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個緩存的組件 --><keep-alive exclude="c" max="5">  <component></component></keep-alive>