Vue2.6：keep-alive 簡述

簡介

該文章主要是一個記錄，會簡單的介紹 Vue2.6 中 keep-alive 相關的內容

做用

keep-alive 主要是用於 Vue 組件的緩存，也就是當你須要頻繁的在多個組件視圖中進行切換的時候，你就能夠考慮使用 keep-alive;
keep-alive 可讓組件保持存活，在二次乃至屢次使用的時候，不須要重複去渲染，也就意味着不會走第二次 生命週期函數;
不過這也意味着，在沒有特殊處理的狀況下，被緩存的組件顯示的數據始終是第一次加載時候的樣子。

使用方法

keep-alive 的使用方法很是的簡單，只須要使用 <keep-alive></keep-alive> 標籤去包裹須要緩存的組件便可。
示例以下：

// 組件緩存
  <keep-alive>
      <component :is="componentName" />
  </keep-alive>

  // 路由緩存
  <keep-alive>
      <router-view />
  </keep-alive>
...
複製代碼

生命週期函數

被 keep-alive 包裹的組件的生命週期是有區別於普通的組件。
被 keep-alive 包裹的組件中，會多出兩個生命週期 activated、deactivated。
第一次進入被 keep-alive 包裹的組件中的時候會依次調用 beforeCreate -> created -> beforeMount -> mounted -> activated，其後的進入皆只會調用 activated，由於組件被緩存了，再次進入的時候，就不會走 建立、掛載 的流程了。
被 keep-alive 包裹的組件退出的時候就不會再執行 beforeDestroy、destroyed 了，由於組件不會真正意義上被銷燬，相對應的組件退出的時候會執行 deactivated 做爲替代。

activated

activated 會在組件進入(再次渲染)的時候被觸發

deactivated

deactivated 會在組件離開(停用、移除)的時候被觸發

配置

在使用中，特別是進行了路由緩存的時候，總歸有些組件須要實時刷新不想讓它進行緩存的，那麼這裏咱們就能夠用到 include、exclude 去進行匹配。
兩種配置能夠並行使用(同時使用)，須要注意的是 exclude 優先級是大於 include 的。

那麼咱們全部組件都進行緩存的時候，會佔用不少的空間，咱們可使用 max 去制定緩存組件的最大數量，當超過最大數量的時候，那麼最久遠的組件緩存將被釋放。

匹配規則：

1. 組件/路由的 name 配置;
2. 父組件中 components 的鍵值;

注意：匿名組件是沒法進行匹配的。

include

顧名思義，匹配到的 組件 會被緩存， 可使用 字符串(逗號分隔)、正則表達式、數組等方法進行匹配。
示例以下：

// 字符串
  <keep-alive include="name1,name2">
      <router-view />
  </keep-alive>
  
  // 數組
  <keep-alive :include="/name1 | name2/">
    <router-view />
  </keep-alive>

  // 數組
  <keep-alive :include="['name1', 'name2']">
    <router-view />
  </keep-alive>
複製代碼

exclude

顧名思義，匹配到的 組件 不會被緩存， 可使用 字符串(逗號分隔)、正則表達式、數組等方法進行匹配。
示例以下：

// 字符串
  <keep-alive exclude="name1,name2">
      <router-view />
  </keep-alive>
  
  // 數組
  <keep-alive :exclude="/name1 | name2/">
    <router-view />
  </keep-alive>

  // 數組
  <keep-alive :exclude="['name1', 'name2']">
    <router-view />
  </keep-alive>
複製代碼

max

可緩存組件的最大數量，須要傳入數字，能夠是字符型和數值型的數據類型。
示例以下：

// 字符串
  <keep-alive max="5">
    <router-view />
  </keep-alive>
  
  // 數值
  <keep-alive :max="5">
    <router-view />
  </keep-alive>
複製代碼

路由配置

在緩存路由的時候，也能夠經過配置 meta 來判斷路由是否須要緩存和不緩存 示例以下：

...
    {
    	path: '/keep',
        name: 'Keep',
        component: Keep,
        meta: {
        	keepAlive: true // 緩存
        }
    }，
    {
    	path: '/alive',
        name: 'Alive',
        component: Alive,
        meta: {
        	keepAlive: false // 不緩存
        }
    }
    ...
複製代碼

結束

以上就是 keep-alive 的簡述了，若是對您有幫助的話，能夠點個👍。