簡介

vue原生元件，可達到cache目的。
使元件狀態維持不變，不重走生命週期。

新增鉤子
activated: 被keep-alive涵蓋的原件重新渲染時觸發。
deactivated: 被keep-alive涵蓋的原件銷毀時觸發。
取代mounted

基礎用法

<keep-alive>
  <myComponent  />
</keep-alive>

參數

include: 包含的元件。(字串、陣列、正則皆可匹配)

<keep-alive include="componentA,componentB">
  <component></component>
</keep-alive>

exclude: 排除的組件。(字串、陣列、正則皆可匹配)

<keep-alive exclude="componentC"> 
  <component />
</keep-alive>

max: 組件數最大值

<keep-alive max="3"> 
  <component />
</keep-alive>

exclude優先於include
狀態保留元件超過上限，則刪除第一個緩存元件

結合 vue router

前面有提到vue router，在實務上，有可以透過keep-alive將跳轉前畫面進行緩存。
所有匹配到的路由皆進行緩存

<keep-alive>
    <router-view></router-view>
</keep-alive>

部分緩存解法:
方法1:透過上述include & exclude進行指定、排除

方法2:meta 屬性
route.js

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 不需要保留 -> false
    }
  },
]

HTML: 透過v-if進行取值判斷

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

透過keep-alive的確可以節省很多前端在處理cache上的工，但相對的也要對不同的路由以及元件進行整理，規劃出真正需要進行緩存的元件，並針對不同業務邏輯、需求進行設計~

有錯誤請不吝指教!
參考資料
https://vuejs.org/v2/guide
https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98
https://juejin.cn/post/6844903918313406472

感謝各路大神