[問題探討]VUE項目基於keep-alive實現緩存

需求：WEB項目實現緩存

緩存需求分析：

一般分爲三類
1，緩存某些確定的頁面；
2，緩存打開的頁面，關閉時取消緩存；
3，前進刷新，後退緩存；

緩存實現基本模型

1，v-if + keep-alive

// 路由配置
export const constantRouterMap = [
  {
    path: '/',
    component: PageA,
    name: 'PageA',
    meta: { title: '頁面A', keepAlive: true }
  },
    path: '/pageA',
    component: PageA,
    name: 'PageA',
    meta: { title: '頁面A', keepAlive: true }
  },
    path: '/pageB',
    component: PageB,
    name: 'PageB',
    meta: { title: '頁面B', keepAlive: false }
  },
]

// router-view處使用
// 注意，這裏$route會取到路由實例裏面的配置
<keep-alive>
  <router-view v-if="$route.meta.keepAlive" :key="$route.name"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.name"/>
// $route是一個全局對象，表示當前激活的路由的狀態信息
// 通過$route可以獲取路由當前激活路由中的相關信息(包括配置及跳轉等信息)

2，include + keep-alive

// 定義數組cachedPages，存儲內容爲頁面name，比如 ['PageA', 'PageB']
// 匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，
// 則匹配它的局部註冊名稱 (父組件 components 選項的鍵值)。
// 匿名組件不能被匹配

// routerView處使用
<keep-alive :include="cachedPages">
  <router-view :key="$route.name"/>
</keep-alive>

緩存需求實現的分析：

1，緩存確定的某些頁面；
分析：在路由配置的keepAlive字段中寫入緩存狀態或者router-view定義的同組件中寫入靜態數組，實現緩存；
2，緩存打開的頁面，關閉時取消緩存；
分析：這種需求，適用於基於帶有標籤導航的項目，這類項目會在每個頁面打開時保存頁面的導航標籤，提供關閉功能，在打開和關閉時會在全局(比如使用VUEX或者WEB STORAGE)存儲打開頁面的明細。這樣就需要監控這個明細結合緩存基本模型來實現；
3，前進刷新，後退緩存；
分析：這種需求，適用於有層級跳轉的項目，比如省/市/區或者一級/二級/三級/四級機構等的項目。這類項目，需要先定義好層級關係，並將關係和緩存明細存儲在全局，再結合緩存基本模型，然後監控路由變化來實現；

// $route是一個全局對象，表示當前激活的路由的狀態信息
// 通過$route可以獲取路由當前激活路由中的相關信息(包括配置及跳轉等信息)
watch: {
  $route(to, from, next) {
  // 1，監控路由，判斷前進或者後退狀態
  // 2，依據前進/後退狀態，更新緩存明細
  }
}

使用鉤子實現個性化功能

// 設置了keepAlive緩存的組件，相關鉤子執行順序如下
// 可以通過如下鉤子實現個性化功能
// 第一次進入：
created->activated->deactivated
// 後續進入時：
activated->deactivated
說明：
// created 組件創建時
// activated 進入緩存組件時
//deactivated 離開緩存組件時