Vue中keep-alive的深入理解和使用

YXi發表於2019-08-18
VueKeep-Alive

什麼是keep-alive?

在平常開發中，有部分元件沒有必要多次初始化，這時，我們需要將元件進行持久化，使元件的狀態維持不變，在下一次展示時，也不會進行重新初始化元件。

也就是說，kee-palive 是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染 。也就是所謂的元件快取

基本用法

//被keep-alive包含的元件會被快取
<keep-alive>
    <component />
</keep-alive>
複製程式碼

被keep-alive包含的元件不會被再次初始化，也就意味著不會重走生命週期函式
但是有時候是希望我們快取的元件可以能夠再次進行渲染，這時Vue為我們解決了這個問題
被包含在 keep-alive 中建立的元件，會多出兩個生命週期的鉤子: activated 與 deactivated：

  • activated 當 keep-alive 包含的元件再次渲染的時候觸發
  • deactivated 當 keep-alive 包含的元件銷燬的時候觸發

keep-alive是一個抽象的元件，快取的元件不會被mounted,為此提供activated和deactivated鉤子函式

在2.1.0 版本後keep-alive新加入了兩個屬性: include(包含的元件快取生效) 與 exclude(排除的元件不快取，優先順序大於include) 。

引數理解

keep-alive可以接收3個屬性做為引數進行匹配對應的元件進行快取:

  • include包含的元件(可以為字串，陣列，以及正規表示式,只有匹配的元件會被快取)

  • exclude排除的元件(以為字串，陣列，以及正規表示式,任何匹配的元件都不會被快取)

  • max快取元件的最大值(型別為字元或者數字,可以控制快取元件的個數)

注：當使用正規表示式或者陣列時，一定要使用v-bind

程式碼示例：

// 只快取元件name為a或者b的元件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// 元件name為c的元件不快取(可以保留它的狀態或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// 如果同時使用include,exclude,那麼exclude優先於include， 下面的例子只快取a元件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// 如果快取的元件超過了max設定的值5，那麼將刪除第一個快取的元件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>
複製程式碼

配合router使用

router-view也是一個元件，如果直接被包在keepalive裡面，那麼所有路徑匹配到的檢視元件都會被快取，如下：

<keep-alive>
    <router-view>
        <!-- 所有路徑匹配到的檢視元件都會被快取！ -->
    </router-view>
</keep-alive>
複製程式碼

如果只想要router-view裡面的某個元件被快取，怎麼辦？

  • 使用 include/exclude
  • 使用 meta 屬性

1.使用 include (exclude例子類似)

//只有路徑匹配到的 name 為 a 元件會被快取
<keep-alive include="a">
    <router-view></router-view>
</keep-alive>
複製程式碼

2.使用 meta 屬性

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被快取
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被快取
    }
  }
]
複製程式碼
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 這裡是會被快取的檢視元件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 這裡是不會被快取的檢視元件，比如 Profile！ -->
</router-view>
複製程式碼

防坑指南

1.keep-alive 先匹配被包含元件的 name 欄位，如果 name 不可用，則匹配當前元件 components 配置中的註冊名稱。
2.keep-alive 不會在函式式元件中正常工作，因為它們沒有快取例項。
3.當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先順序最高(當前vue 2.4.2 version)。比如：包含於排除同時匹配到了元件A，那元件A不會被快取。
4.包含在 keep-alive 中，但符合 exclude ，不會呼叫activated和 deactivated。

^_<

相關文章