1. 簡(jiǎn)介

keep-alive 是 Vue 的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。和 transition 相似，keep-alive 是一個(gè)抽象組件：它自身不會(huì)渲染成一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

作用： 在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM，減少加載時(shí)間及性能消耗，提高用戶(hù)體驗(yàn)性。

原理： 在 created 函數(shù)調(diào)用時(shí)將需要緩存的 VNode 節(jié)點(diǎn)保存在 this.cache 中／在 render（頁(yè)面渲染） 時(shí)，如果 VNode 的 name 符合緩存條件（可以用 include 以及 exclude 控制），則會(huì)從 this.cache 中取出之前緩存的 VNode 實(shí)例進(jìn)行渲染。
（VNode：虛擬DOM，其實(shí)就是一個(gè)JS對(duì)象）

2. 使用

2.1 參數(shù)

注意： include/exclude 值是組件中的 name 命名，而不是路由中的組件 name 命名；

// router.js
{
  path: '/home',
  name: 'home',
  component: () => import('../views/home.vue')
},
{ 
  path: '/test',
  name: 'test',
  component: () => import('../views/test.vue')
},

// App.vue
<keep-alive include="test">
   <router-view/>
</keep-alive>
----------------------------------------------------------------------------------------------------------------
補(bǔ)充： include/exclude 值的多種形式。
// 1. 將緩存 name 為 test 的組件(基本）
<keep-alive include='test'>
  <router-view/>
</keep-alive>
// 2. 將緩存 name 為 a 或者 b 的組件，結(jié)合動(dòng)態(tài)組件使用
<keep-alive include='a,b'>
  <router-view/>
</keep-alive>
// 3. 使用正則表達(dá)式，需使用 v-bind
<keep-alive :include='/a|b/'>
  <router-view/>
</keep-alive>	
// 4.動(dòng)態(tài)判斷
<keep-alive :include='includedComponents'>
  <router-view/>
</keep-alive>
// 5. 將不緩存 name 為 test 的組件
<keep-alive exclude='test'>
  <router-view/>
</keep-alive>
// 6. 和 `<transition>` 一起使用
<transition>
  <keep-alive>
    <router-view/>
  </keep-alive>
</transition>
// 7. 數(shù)組 (使用 `v-bind`)
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

// test.vue
<template>
  <div class="wrap">
    <input type="text" v-model="inputVal">
  </div>
</template>
<script>
export default {
  name:'test',
  data(){
    return {
      inputVal:'',
    }
  }
}
</script>

此時(shí)切換路由，我們就會(huì)發(fā)現(xiàn) test 文件內(nèi)的 inputVal 會(huì)被緩存了，而 home 內(nèi)的值沒(méi)有被緩存。

此外，我們還可以通過(guò)路由中的 meta 屬性來(lái)控制，是否需要緩存。將 test 路由中的 meta 添加 keepAlive 屬性為 true，表示當(dāng)前路由組件要進(jìn)行緩存。

// router.js
{
  path: '/home',
  name: 'home',
  component: () => import('../views/home.vue')
},
{ 
  path: '/test',
  name: 'test',
  meta:{
    keepAlive:true
  },
  component: () => import('../views/test.vue')
},

keep-alive 代碼可以結(jié)合 v-if 進(jìn)行包裹，如果 meta 中的 keepAlive 為 true 進(jìn)行緩存，否側(cè)不進(jìn)行緩存。

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

實(shí)際開(kāi)發(fā)中，我們可以結(jié)合路由守衛(wèi)來(lái)實(shí)現(xiàn)需要緩存組件的緩存。

傳送門(mén)：詳解Vue路由鉤子及應(yīng)用場(chǎng)景

export default {
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  }
}
</script>

2.2 生命周期函數(shù)

使用< keep-alive > 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔(dān)原來(lái)created鉤子中獲取數(shù)據(jù)的任務(wù)。

被包含在 < keep-alive > 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated

activated：在組件被激活時(shí)調(diào)用，在組件第一次渲染時(shí)也會(huì)被調(diào)用，之后每次keep-alive激活時(shí)被調(diào)用。

deactivated：在組件被停用時(shí)調(diào)用。

注意： 只有組件被 keep-alive 包裹時(shí)，這兩個(gè)生命周期才會(huì)被調(diào)用，如果作為正常組件使用，是不會(huì)被調(diào)用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個(gè)鉤子依然不會(huì)被調(diào)用！另外在服務(wù)端渲染時(shí)此鉤子也不會(huì)被調(diào)用的。

什么時(shí)候獲取數(shù)據(jù)？

當(dāng)引入keep-alive 的時(shí)候，頁(yè)面第一次進(jìn)入，鉤子的觸發(fā)順序 created -> mounted -> activated，退出時(shí)觸發(fā) deactivated。

當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā) activated。

我們知道 keep-alive 之后頁(yè)面模板第一次初始化解析變成 HTML 片段后，再次進(jìn)入就不在重新解析而是讀取內(nèi)存中的數(shù)據(jù)。只有當(dāng)數(shù)據(jù)變化時(shí)，才使用 VirtualDOM 進(jìn)行 diff 更新。所以，頁(yè)面進(jìn)入的數(shù)據(jù)獲取應(yīng)該在 activated 中也放一份。數(shù)據(jù)下載完畢手動(dòng)操作 DOM 的部分也應(yīng)該在activated中執(zhí)行才會(huì)生效。

所以，應(yīng)該 activated 中留一份數(shù)據(jù)獲取的代碼，或者不要 created 部分，直接將 created 中的代碼轉(zhuǎn)移到 activated 中。

2.3 應(yīng)用場(chǎng)景

如果未使用 keep-alive 組件，則在頁(yè)面回退時(shí)仍然會(huì)重新渲染頁(yè)面，觸發(fā) created 鉤子，使用體驗(yàn)不好。

在以下場(chǎng)景中使用 keep-alive 組件會(huì)顯著提高用戶(hù)體驗(yàn)，菜單存在多級(jí)關(guān)系（列表頁(yè) + 詳情頁(yè)）的場(chǎng)景如：

• 商品列表頁(yè)點(diǎn)擊商品跳轉(zhuǎn)到商品詳情，返回后仍顯示原有信息；
• 訂單列表跳轉(zhuǎn)到訂單詳情，返回等場(chǎng)景；

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評(píng)論