問(wèn)題描述（什么是keep-alive） keep-alive顧名思義，保持活躍。保持誰(shuí)活躍呢？ 首先我們知道，因?yàn)関ue就是組件化編程，一個(gè).vue文件就是一個(gè)組件。就像萬(wàn)事萬(wàn)物一樣，都有從出生到消亡的生命周期過(guò)程，vue的組件也是一樣，也有自己的生命周期，比如create創(chuàng)建組件、mounted往組件上掛數(shù)據(jù)、update更新組件上掛的數(shù)據(jù)，destroy把組件實(shí)例銷(xiāo)毀。 所以使用keep-alive就是保持組件活躍，不會(huì)被destroy銷(xiāo)毀掉，就一直還活著，組件沒(méi)有被銷(xiāo)毀掉的話，組件上掛載的數(shù)據(jù)就還存在，所以狀態(tài)就可以保留，所以，keep-alive就可以保持組件的狀態(tài)。

http協(xié)議的請(qǐng)求頭里面也有一個(gè)keep-alive，保持http通話，這樣：Connection: keep-alive 功能雖然不一樣，但是思想上是一樣的即為~保持狀態(tài)活躍

小demo，看一下keep-alive的使用效果

demo分為上面的路由導(dǎo)航部分，下面的內(nèi)容區(qū)部分。點(diǎn)擊上面的路由導(dǎo)航，路由視圖渲染對(duì)應(yīng)的路由組件。效果圖如下：

未使用keep-alive的效果圖

對(duì)應(yīng)代碼

// #App.vue中<template> <div class='box'> <!-- 路由導(dǎo)航 --> <div class='nav'> <router-link to='/'>去home頁(yè)面</router-link> <router-link to='/about'>去about頁(yè)面</router-link> <router-link to='/detail'>去detail頁(yè)面</router-link> </div> <!-- 路由導(dǎo)航對(duì)應(yīng)的內(nèi)容區(qū) --> <main> <router-view></router-view> </main> </div></template>// home.vue中，放置一個(gè)復(fù)選框<el-checkbox v-model='checked'>備選項(xiàng)</el-checkbox>// about.vue中，放置一個(gè)輸入框<el-input v-model='input' placeholder='請(qǐng)輸入內(nèi)容'></el-input>// detail.vue中方式一個(gè)下拉框<el-select v-model='value' placeholder='請(qǐng)選擇'> <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value' > </el-option></el-select>

分析

我們發(fā)現(xiàn)，當(dāng)我們沒(méi)有使用keep-alive組件包裹住router-view視圖組件的時(shí)候，左邊~我們?cè)谌ome頁(yè)面勾選了，在去about頁(yè)面輸入了，在去detail頁(yè)面下拉選擇了，離開(kāi)這個(gè)路由頁(yè)面，再回來(lái)時(shí)，我們發(fā)現(xiàn)我們之前做的操作，勾選、輸入、下拉選擇都不存在了，之前的狀態(tài)都沒(méi)了。原因很簡(jiǎn)單，當(dāng)離開(kāi)這個(gè)路由頁(yè)面的時(shí)候，會(huì)觸發(fā)這個(gè)路由頁(yè)面對(duì)應(yīng)組件上的destroy鉤子方法，然后這個(gè)路由頁(yè)面對(duì)應(yīng)的組件就被銷(xiāo)毀了，組件銷(xiāo)毀了，組件上的掛載的數(shù)據(jù)也就啥也沒(méi)有了。 與此同時(shí)，我們可以看到在右邊的Vue.js devtools工具中，router-view視圖層始終只是home、about、detail組件來(lái)回切換，組件來(lái)回切換，其實(shí)就是組件不斷的創(chuàng)建、銷(xiāo)毀的過(guò)程。加下來(lái)我們看看使用keep-alive的效果。 使用keep-alive的效果圖

對(duì)應(yīng)代碼

<template> <div class='box'> <!-- 路由導(dǎo)航 --> <div class='nav'> <router-link to='/'>去home頁(yè)面</router-link> <router-link to='/about'>去about頁(yè)面</router-link> <router-link to='/detail'>去detail頁(yè)面</router-link> </div> <!-- 路由導(dǎo)航對(duì)應(yīng)的內(nèi)容區(qū) --> <main> <keep-alive> <!-- 使用keep-alive包了一層，就可以緩存啦 --><router-view></router-view> </keep-alive> </main> </div></template>

分析

我們給視圖層組件使用keep-alive包住以后，我們發(fā)現(xiàn)，我們勾選、輸入、下拉選擇的內(nèi)容，在路由來(lái)回切換的時(shí)候，就不會(huì)丟失了，即使用keep-alive保存了之前的組件狀態(tài)

與此同時(shí)，我們可以看到在右邊的Vue.js devtools工具中，在router-view視圖中對(duì)應(yīng)的，切換過(guò)去的組件已經(jīng)處于inactive狀態(tài)，inactive英文意思是不活動(dòng)的、未使用的，即已經(jīng)緩存的，沒(méi)有銷(xiāo)毀的。所以組件上的我們所做的操作、組件的狀態(tài)就被緩存了，所以我們勾選的、輸入的、下拉選擇的都還在。

Vue.js devtools挺好用，可以通過(guò)谷歌下載，vue開(kāi)發(fā)中的很好的工具

引出問(wèn)題

看到這里我們發(fā)現(xiàn)，直接加上keep-alive的話，會(huì)把所有的router-view層級(jí)下的視圖的組件都緩存了，不過(guò)有的時(shí)候，我們只想緩存部分，不想緩存所有的，那這怎么辦呢？沒(méi)關(guān)系，大佬們已考慮到了，已經(jīng)提前為我們解決好了，就是keep-alive中的include、exclude屬性

include和exclude指定是否緩存某些組件

include屬性

include 包含的意思。值為字符串或正則表達(dá)式或數(shù)組。只有組件的名稱與include的值相同的才會(huì)被緩存，即指定哪些被緩存，可以指定多個(gè)被緩存。這里以字符串為例，指定多個(gè)組件緩存，語(yǔ)法是用逗號(hào)隔開(kāi)。如下：

// 指定home組件和about組件被緩存<keep-alive include='home,about' > <router-view></router-view></keep-alive>

exclude屬性

exclude相當(dāng)于include的反義詞，就是除了的意思，指定哪些組件不被緩存，用法和include類似，如下：

// 除了home組件和about組件別的都緩存，本例中就是只緩存detail組件<keep-alive exclude='home,about' > <router-view></router-view></keep-alive>

以include='about,detail'為例的效果圖

語(yǔ)法的意思是，只緩存about和detail，別的組件不緩存。我們看下圖的vue工具，也可以看出來(lái)，緩存的組件，不處于對(duì)應(yīng)展示的路由下，就會(huì)成為inactive狀態(tài)。

keep-alive除了include和exclude屬性之外，還有一個(gè)屬性就是max屬性，這個(gè)max一般情況用的不是太多，主要目的就是控制一下被緩存的組件的個(gè)數(shù)，后緩存的就會(huì)把先緩存的給擠掉線了，也是相當(dāng)于緩存優(yōu)化的一中策略了。畢竟適當(dāng)緩存提高用戶體驗(yàn)，緩存過(guò)渡，電腦變卡。

include和exclude的屬性值是組件的名稱

include和exclude的屬性值是組件的名稱，也就是組件的name屬性值，也就是如下的name屬性值。

<script> export default { name: 'App' // ... };</script>

引出問(wèn)題

我們知道組件中都有對(duì)應(yīng)的邏輯js部分，而且組件要發(fā)請(qǐng)求獲取數(shù)據(jù)的，一般情況下，我們都是在created或者mounted鉤子中去發(fā)請(qǐng)求，向后端的大佬要數(shù)據(jù)的，關(guān)于使用keep-alive后的組件的鉤子函數(shù)的問(wèn)題，我們需要注意一下

使用keep-alive的鉤子函數(shù)執(zhí)行順序問(wèn)題

首先使用了keep-alive的組件以后，組件上就會(huì)自動(dòng)加上了activated鉤子和deactivated鉤子。

activated 當(dāng)組件被激活（使用）的時(shí)候觸發(fā) 可以簡(jiǎn)單理解為進(jìn)入這個(gè)頁(yè)面的時(shí)候觸發(fā) deactivated 當(dāng)組件不被使用（inactive狀態(tài)）的時(shí)候觸發(fā) 可以簡(jiǎn)單理解為離開(kāi)這個(gè)頁(yè)面的時(shí)候觸發(fā)

進(jìn)入組件和離開(kāi)組件鉤子執(zhí)行順序

假設(shè)我們只緩存home組件，我們先看一下代碼，再在鉤子中打印出對(duì)應(yīng)的順序。就知道鉤子執(zhí)行的順序了，自己動(dòng)手印象深刻

代碼如下

<template><div> <el-checkbox v-model='checked'>備選項(xiàng)</el-checkbox></div></template><script>export default {name: 'home',data() { return { checked: false } },created() { console.log('我是created鉤子');},mounted() { console.log('我是mounted鉤子');},activated() { console.log('我是activated鉤子');},deactivated() { console.log('我是deactivated鉤子');},beforeDestroy() { console.log('我是beforeDestroy鉤子');所以我們可以得出結(jié)論：},};</script>

進(jìn)入組件打印結(jié)果如下

我是created鉤子我是mounted鉤子我是activated鉤子

離開(kāi)組件打印結(jié)果如下

我是deactivated鉤子

得出結(jié)論

初始進(jìn)入和離開(kāi) created ---> mounted ---> activated --> deactivated后續(xù)進(jìn)入和離開(kāi) activated --> deactivated

所以我們可以在activated 和deactivated鉤子中去做一些邏輯處理，這兩個(gè)鉤子有點(diǎn)類似mounted和beforeDestroy鉤子，但是還是不一樣。畢竟使用keep-alive不會(huì)銷(xiāo)毀組件

keep-alive的應(yīng)用場(chǎng)景舉例 查看表格某條數(shù)據(jù)詳情頁(yè)，返回還是之前的狀態(tài)，比如還是之前的篩選結(jié)果，還是之前的頁(yè)數(shù)等 填寫(xiě)的表單的內(nèi)容路由跳轉(zhuǎn)返回還在，比如input框、下選擇拉框、開(kāi)關(guān)切換等用戶輸入了一大把東西，跳轉(zhuǎn)再回來(lái)不能清空啊，不能讓用戶再寫(xiě)一遍啊，是吧老鐵 反正就是保留之前的狀態(tài)，具體應(yīng)用場(chǎng)景其實(shí)也有很多，在此不贅述...

補(bǔ)充

上述我們使用的是keep-alive包裹router-view的小案例來(lái)講解的，實(shí)際上keep-alive一般情況下，要么包裹router-view，要么包裹動(dòng)態(tài)組件component。代碼寫(xiě)法實(shí)際上是一樣的。包裹動(dòng)態(tài)組件的用法如下：

<keep-alive include='home' exclude='about'> <component :is='whichComponent'></component></keep-alive>

keep-alive的include和exclude屬性也支持v-bind的語(yǔ)法，所以也是很靈活的。

總結(jié)

到此這篇關(guān)于vue中keep-alive組件用法的文章就介紹到這了,更多相關(guān)vue keep-alive組件內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！