keep-alive定義：
keep-alive是Vue.js的一個內(nèi)置組件倍权。它能夠不活動的組件實例保存在內(nèi)存中谦去，而不是直接將其銷毀攒巍，它是一個抽象組件，不會被渲染到真實DOM中羊瘩，也不會出現(xiàn)在父組件鏈中泰佳。
它提供了include與exclude兩個屬性盼砍，允許組件有條件地進(jìn)行緩存。
使用用法
<keep-alive>
<component>此處標(biāo)簽是開發(fā)者自定義的組件</component>
</keep-alive>
這里的component組件會被緩存起來逝她。
舉個栗子
<keep-alive>
<coma v-if="test"></coma>
<comb v-else></comb>
</keep-alive>
<button @click="test=handleClick">請點擊</button>
export default {
data () {
return {
test: true
}
},
methods: {
handleClick () {
this.test = !this.test;
}
}
}
在點擊button時候浇坐，coma與comb兩個組件會發(fā)生切換，但是這時候這兩個組件的狀態(tài)會被緩存起來黔宛，比如說coma與comb組件中都有一個input標(biāo)簽近刘，那么input標(biāo)簽中的內(nèi)容不會因為組件的切換而消失。
props
keep-alive組件提供了include與exclude兩個屬性來允許組件有條件地進(jìn)行緩存臀晃，二者都可以用逗號分隔字符串觉渴、正則表達(dá)式或一個數(shù)組來表示。
include: 字符串或正則表達(dá)式徽惋。只有匹配的組件會被緩存疆拘。
exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會被緩存寂曹。
keep-alive的聲明周期執(zhí)行
頁面第一次進(jìn)入哎迄，鉤子的觸發(fā)順序
created-> mounted-> activated，退出時觸發(fā) deactivated
當(dāng)再次進(jìn)入（前進(jìn)或者后退）時隆圆，只觸發(fā) activated
事件掛載的方法等漱挚，只執(zhí)行一次的放在 mounted 中；組件每次進(jìn)去執(zhí)行的方法放在 activated 中渺氧；
<keep-alive include="a">
<component></component>
</keep-alive>
將緩存name為a的組件旨涝。
<keep-alive exclude="a">
<component></component>
</keep-alive>
name為a的組件將不會被緩存。
注意：此處的name值是與在名稱為component組件中的name值對應(yīng)的侣背。
生命鉤子
keep-alive提供了兩個生命鉤子白华，分別是activated與deactivated。
被keepalive包含的組件不會被再次初始化贩耐，也就意味著不會重走生命周期函數(shù)
但是有時候是希望我們緩存的組件可以能夠再次進(jìn)行渲染弧腥，這時 Vue 為我們解決了這個問題
被包含在 keep-alive 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated：
activated 當(dāng) keepalive 包含的組件再次渲染的時候觸發(fā)
deactivated 當(dāng) keepalive 包含的組件銷毀的時候觸發(fā)
keep-alive是一個抽象的組件潮太，keep-alive會將組件保存在內(nèi)存中管搪，并不會銷毀以及重新創(chuàng)建，所以不會重新調(diào)用組件的created等方法铡买，緩存的組件不會被 mounted,為此需要用activated與deactivated這兩個生命鉤子來得知當(dāng)前組件是否處于活動狀態(tài)更鲁。
參數(shù)理解
keep-alive 可以接收3個屬性做為參數(shù)進(jìn)行匹配對應(yīng)的組件進(jìn)行緩存:
include 包含的組件(可以為字符串，數(shù)組奇钞，以及正則表達(dá)式,只有匹配的組件會被緩存)
exclude 排除的組件(以為字符串澡为，數(shù)組，以及正則表達(dá)式,任何匹配的組件都不會被緩存)
max 緩存組件的最大值(類型為字符或者數(shù)字,可以控制緩存組件的個數(shù))
注：當(dāng)使用正則表達(dá)式或者數(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>
<!-- 使用正則表達(dá)式媒至，需使用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>
遇見 vue-router 結(jié)合router使用塘慕，緩存部分頁面
所有路徑下的視圖組件都會被緩存
<keep-alive>
<router-view>
<!-- 所有路徑匹配到的視圖組件都會被緩存筋夏！ -->
</router-view>
</keep-alive>
如果只想要router-view里面的某個組件被緩存蒂胞，怎么辦图呢？
1、使用 include/exclude
2骗随、使用 meta 屬性
方法1蛤织、用 include (exclude例子類似)
缺點：需要知道組件的 name，項目復(fù)雜的時候不是很好的選擇
<keep-alive include="a">
<router-view>
<!-- 只有路徑匹配到的 include 為 a 組件會被緩存 -->
</router-view>
</keep-alive>
方法2鸿染、使用 meta 屬性
優(yōu)點：不需要例舉出需要被緩存組件名稱
使用$route.meta的keepAlive屬性：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
需要在router中設(shè)置router的元信息meta：
//...router.js
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello,
meta: {
keepAlive: false // 不需要緩存
}
},
{
path: '/page1',
name: 'Page1',
component: Page1,
meta: {
keepAlive: true // 需要被緩存
}
}
]
})
深入keep-alive組件實現(xiàn)
說完了keep-alive組件的使用指蚜，我們從源碼角度看一下keep-alive組件究竟是如何實現(xiàn)組件的緩存的呢？
created與destroyed鉤子
created鉤子會創(chuàng)建一個cache對象涨椒，用來作為緩存容器摊鸡，保存vnode節(jié)點。
created () {
/* 緩存對象 */
this.cache = Object.create(null)
},
destroyed鉤子則在組件被銷毀的時候清除cache緩存中的所有組件實例蚕冬。
/* destroyed鉤子中銷毀所有cache中的組件實例 */
destroyed () {
for (const key in this.cache) {
pruneCacheEntry(this.cache[key])
}
},
【拓展一下】使用 router.meta 拓展
假設(shè)這里有 3 個路由： A免猾、B、C囤热。
需求如下：
默認(rèn)顯示 A
B 跳到 A猎提，A 不刷新
C 跳到 A，A 刷新
實現(xiàn)方式如下：
在 A 路由里面設(shè)置 meta 屬性：
{
path: '/',
name: 'A',
component: A,
meta: {
keepAlive: true // 需要被緩存
}
}
在 B 組件里面設(shè)置 beforeRouteLeave：
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = true; // 讓 A 緩存旁蔼，即不刷新
next();
}
};
在 C 組件里面設(shè)置 beforeRouteLeave：
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 設(shè)置下一個路由的 meta
to.meta.keepAlive = false; // 讓 A 不緩存锨苏，即刷新
next();
}
};
這樣便能實現(xiàn) B 回到 A，A 不刷新棺聊；而 C 回到 A 則刷新伞租。
防坑指南
1.keep-alive 先匹配被包含組件的 name 字段，如果 name 不可用限佩，則匹配當(dāng)前組件 components 配置中的注冊名稱肯夏。
2.keep-alive 不會在函數(shù)式組件中正常工作，因為它們沒有緩存實例犀暑。
3.當(dāng)匹配條件同時在 include 與 exclude 存在時驯击，以 exclude 優(yōu)先級最高(當(dāng)前vue 2.4.2 version)。比如：包含于排除同時匹配到了組件A耐亏，那組件A不會被緩存徊都。
4.包含在 keep-alive 中，但符合 exclude 广辰，不會調(diào)用 activated 和 deactivated暇矫。
總結(jié)
路由大法不錯主之，不需要關(guān)心哪個頁面跳轉(zhuǎn)過來的，只要 router.go(-1) 就能回去李根，不需要額外參數(shù)槽奕。
在非單頁應(yīng)用的時候，keep-alive 并不能有效的緩存了房轿。
keep-alive生命周期鉤子函數(shù)：activated粤攒、deactivated
使用<keep-alive>會將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁面的時候獲取最新的數(shù)據(jù)囱持，需要在activated階段獲取數(shù)據(jù)夯接，承擔(dān)原來created鉤子中獲取數(shù)據(jù)的任務(wù)。
附錄纷妆，題外話
生命周期函數(shù)：就是vue在某個時間段會自動執(zhí)行的函數(shù)
1盔几、beforeCreate(){}在執(zhí)行的時候，data還有methods都沒有被初始化掩幢。
2逊拍、created(){} data還有methods都被初始化好了，如果要調(diào)用 methods 方法或者操作 data 里面的數(shù)據(jù)际邻，最早只能在 created 里面進(jìn)行操作芯丧。
3、beforeMount(){} 表示模板已經(jīng)在內(nèi)存中編輯完成了枯怖，但是尚未渲染到模板頁面中注整。即頁面中的元素，沒有被真正的替換過來度硝，只是之前寫的一些模板字符串肿轨。
4、mounted(){} 表示內(nèi)存中模板已經(jīng)真實的掛載到頁面中去了蕊程，用戶可以看到渲染好的界面了
注意這是一個生命周期函數(shù)的最后一個函數(shù)了椒袍，執(zhí)行完這個函數(shù)表示 整個vue實例已經(jīng)初始化完成了，組件脫離了創(chuàng)建階段藻茂，進(jìn)入運行階段驹暑。
下面是運行期間的兩個生命周期函數(shù)的鉤子：
5、beforeUpdate(){} 表示我們的界面還沒更新 但是data里面的數(shù)據(jù)是最新的辨赐。即頁面尚未和最新的data里面的數(shù)據(jù)保持同步优俘。
6、update(){} 表示頁面和data里面的數(shù)據(jù)已經(jīng)包吃同步了 都是最新的掀序。
7帆焕、beforeDestory(){} 當(dāng)執(zhí)行這個生命周期鉤子的時候 vue的實例從運行階段進(jìn)入銷毀階段 此時實例身上的data 還有 methods處于可用的狀態(tài)。
8不恭、Destoryed(){} 表示組件已經(jīng)完全被銷毀了 組件中所有的實例方法都是不能用了
