keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染 。也就是所謂的組件緩存
<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
prop:
include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

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

頁面第一次進入，鉤子的觸發(fā)順序
created-> mounted-> activated，
退出時觸發(fā) deactivated
當(dāng)再次進入（前進或者后退）時，只觸發(fā) activated

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

基本用法

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

注意：

踩坑：keep-alive匹配的是組件內(nèi)的name，不是路由的name！

被keepalive包含的組件不會被再次初始化，也就意味著不會重走生命周期函數(shù)
Vue 為我們解決了這個問題
被包含在 keep-alive 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated：
activated： 當(dāng) keepalive 包含的組件再次渲染的時候觸發(fā)（首次渲染的時候也被觸發(fā)了）
deactivated ：當(dāng) keepalive 包含的組件銷毀的時候觸發(fā)

參數(shù)理解：

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

• include 包含的組件(可以為字符串，數(shù)組，以及正則表達式,只有匹配的組件會被緩存)
• exclude 排除的組件(以為字符串，數(shù)組，以及正則表達式,任何匹配的組件都不會被緩存)
• max 緩存組件的最大值(類型為字符或者數(shù)字,可以控制緩存組件的個數(shù))

<!-- 將（只）緩存組件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>

如果只想要router-view里面的某個組件被緩存，怎么辦？

• 使用 include/exclude
  缺點：需要知道組件的 name，項目復(fù)雜的時候不是很好的選擇
• 使用 meta 屬性
  優(yōu)點：不需要例舉出需要被緩存組件名稱

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

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

活用：

若有需求要求從特定組件跳轉(zhuǎn)到某組件時緩存內(nèi)容，否則不緩存，可以結(jié)合路由導(dǎo)航守衛(wèi)，更改to或者from參數(shù)的屬性

注意事項：

1.keep-alive 先匹配被包含組件的 name 字段，如果 name 不可用，則匹配當(dāng)前組件 components 配置中的注冊名稱。
2.keep-alive 不會在函數(shù)式組件中正常工作，因為它們沒有緩存實例。
3.當(dāng)匹配條件同時在 include 與 exclude 存在時，以 exclude 優(yōu)先級最高。
4.包含在 keep-alive 中，但符合 exclude ，不會調(diào)用 activated 和 deactivated。

部分內(nèi)容參考鏈接：https://juejin.cn/post/6844903919273918477