怎么介紹呢，只能說是我今年面試的時候每一家公司都問了，好了正片開始。

什么是keep-alive

<keep-alive>是一個內(nèi)置組件，允許我們在多個組件之間動態(tài)切換時，有條件地緩存組件實例。使被包含的組件保留狀態(tài)，或避免重新渲染

為什么使用

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

用法

含有屬性：

• include: String｜ RegExp | Array。只有匹配的組件會被緩存。（使用字符串形式時用‘ , ’隔開且組件名之間不要留有空格）
• exclude: String｜ RegExp | Array。任何匹配的組件都不會被緩存。（使用字符串形式時用‘ , ’隔開且組件名之間不要留有空格）
• max：Number | String。緩存的組件實例的最大數(shù)量，如果緩存實例的數(shù)量即將超過指定的最大計數(shù)，則最近訪問最少的緩存實例將被銷毀，以便為新實例騰出空間。
  基本用法：

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

有其他屬性時：

<!-- 只緩存組件name為a或者b的組件, 結(jié)合動態(tài)組件使用，currentTab是我data中定義的動態(tài)組件名，下面情況相同，就不做相同解釋了 -->
 <keep-alive exclude="a,b">
   <component :is="currentTab"></component>
 </keep-alive>

<!-- 組件名為c的組件不緩存，即不重新渲染-->
<keep-alive exclude="c"> 
    <component :is="currentTab"></component>
</keep-alive>

<!-- 使用正則表達式，需使用v-bind -->
<keep-alive :include="/a|b/">
    <component :is="currentTab"></component>
</keep-alive>

<!-- 如果同時使用include,exclude,那么exclude優(yōu)先于include， 下面的例子只緩存a,c組件 -->
<keep-alive include="a,b,c" exclude="b"> 
    <component :is="currentTab"></component>
</keep-alive>

<!-- 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個緩存的組件 -->
<keep-alive exclude="a" max="5"> 
    <component :is="currentTab"></component>
</keep-alive>

注：

生命周期

當(dāng)我們緩存某組件實例時，它會進入停用狀態(tài)而不是被卸載。當(dāng)組件實例作為緩存樹的一部分插入 DOM 時，它會被激活。

keep-alive 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated：

• activated 當(dāng) keepalive 包含的組件被激活（使用）的時候觸發(fā)，可以簡單理解為進入這個頁面的時候觸發(fā)
• deactivated 當(dāng) keepalive 包含的組件不被使用（inactive狀態(tài)）的時候觸發(fā)，可以簡單理解為離開這個頁面的時候觸發(fā)
  假設(shè)我們緩存About組件，在About組件中編寫以下代碼并執(zhí)行：

  created() {
    console.log("我是created鉤子");
  },
  mounted() {
    console.log("我是mounted鉤子");
  },
  activated() {
    console.log("我是activated鉤子");
  },
  deactivated() {
    console.log("我是deactivated鉤子");
  },
  beforeDestroy() {
    console.log("我是beforeDestroy鉤子");
  },

首次進入頁面，鉤子的觸發(fā)順序：
我是created鉤子 —〉 我是mounted鉤子 —〉 我是activated鉤子
離開頁面：
我是deactivated鉤子
——————————————————————————————
再次進入：
我是activated鉤子
離開：
我是deactivated鉤子

vue-router 結(jié)合router使用

基本使用：

//緩存所有
<keep-alive>
    <router-view>
    </router-view>
</keep-alive>

如果我們要緩存部分：

1. 使用 include/ exclude
2. 使用meta屬性
   第一種方式的使用方式：

//只有路徑匹配到的 include 為 home 組件會被緩存 
<keep-alive include="home">
    <router-view>
    </router-view>
</keep-alive>

exclude用法類似，我就不演示了，大家可以自己試一下
第二種方式：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router中進行相應(yīng)配置：

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
      meta: {
        keepAlive: false // 不需要緩存
      }
    },
    {
      path: '/About',
      name: 'About',
      component: About,
      meta: {
        keepAlive: true // 需要被緩存
      }
    }
  ]
})

另外說個之前朋友在群里問的一個問題，原紀(jì)錄找不到了，大體意思就是Home,About,List三個組件，Home跳List List不刷新，About跳List List刷新
說下如何實現(xiàn)哈：
可以像上面一樣，給List設(shè)置下meta
然后在 Home 組件里面設(shè)置 beforeRouteLeave：

 beforeRouteLeave(to, from, next) {
  // 設(shè)置下一個路由的 meta。可以先判斷下是否是List，我這就不判斷了，直接寫keepAlive配置了
  to.meta.keepAlive = true;  // 讓 List 緩存，即不刷新
  next();
}

然后在 About 組件里面設(shè)置 beforeRouteLeave：

 beforeRouteLeave(to, from, next) {
  // 設(shè)置下一個路由的 meta。同樣可以先判斷一下我就不寫了
  to.meta.keepAlive = false;  // 讓 List 不緩存
  next();
}

完結(jié)撒花??，如有不對歡迎指正。覺得有幫助的話記得點個贊哦～