結(jié)論先行

<keep-alive>是 Vue 的內(nèi)置組件，主要是用于緩存組件的實(shí)例，避免組件重復(fù)的被創(chuàng)建和銷毀組件，提高應(yīng)用的響應(yīng)速度和性能。

原理：keep-alive 是一個(gè)緩存，會標(biāo)記這個(gè)虛擬節(jié)點(diǎn)被緩存過了，后續(xù)就不會重新初始化，也不會進(jìn)行銷毀。 

那常見的配置屬性有 include 、exclude 和 max; 

include 和 exclude 用于指定需要緩存或排除的組件名稱；

而 max 是用來定義組件的最大緩存?zhèn)€數(shù)。

內(nèi)部采用 LRU 算法用于維護(hù)緩存列表。如果緩存?zhèn)€數(shù)超過最大數(shù)，那么會將最久沒有被訪問到的組件移出緩存列表，也就是銷毀組件。

keep-alive 提供了兩個(gè)鉤子函數(shù)： activated 鉤子和 deactivated 鉤子。

• activated：當(dāng)組件被激活（使用）的時(shí)候觸發(fā)，常用于執(zhí)行一些數(shù)據(jù)初始化或者異步操作；
• deactivated：當(dāng)組件失活（不被使用）的時(shí)候觸發(fā)；

但是在使用 keep-alive 時(shí)，要注意數(shù)據(jù)的更新問題，避免出現(xiàn)數(shù)據(jù)無法更新的情況。

一、背景

在平常開發(fā)中，有部分組件沒有必要多次初始化。這時(shí)，我們需要將組件進(jìn)行持久化，使組件的狀態(tài)維持不變。

在下一次展示時(shí)，也不會進(jìn)行重新初始化組件。keep-alive就有這個(gè)功能。

二、含義

<keep-alive>是 Vue 的內(nèi)置組件，可以使被包裹的組件保留狀態(tài)，避免重復(fù)的創(chuàng)建和銷毀組件，提高應(yīng)用的響應(yīng)速度和性能。

當(dāng)一個(gè)組件被<keep-alive>標(biāo)簽包裹時(shí)，會緩存組件的實(shí)例在內(nèi)存中，而不會把組件銷毀。當(dāng)這個(gè)組件再次被使用時(shí)，Vue會從緩存中提取組件的實(shí)例，將其重新掛載到頁面上。

這個(gè)功能可以提高應(yīng)用的性能，特別是在需要頻繁切換組件的場景下，就比如Tab切換或者路由切換，因?yàn)椴恍枰恳淮吻袚Q時(shí)都重新創(chuàng)建和銷毀組件，而是直接從緩存中獲取，這樣可以避免重復(fù)的初始化和渲染，從而提高應(yīng)用的響應(yīng)速度和性能。

舉個(gè)應(yīng)用場景：

有個(gè)員工列表，現(xiàn)在我們點(diǎn)擊某條數(shù)據(jù)，查看員工詳情后，再返回到員工列表。這個(gè)時(shí)候我們就希望這個(gè)列表能夠保持剛才的狀態(tài)，這時(shí)候就可以使用keep-alive把這個(gè)列表所在的組件包裹。

和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會渲染一個(gè) DOM 元素，也不會出現(xiàn)在父組件鏈中。 

三、配置屬性

include 和 exclude用于指定需要緩存或排除的組件名稱；

max 和 min 用于指定緩存的最大和最小數(shù)量。 

① include：包含

值為字符串 / 正則表達(dá)式 / 數(shù)組。只有組件的名稱（name）與 include 的值相同的才會被緩存。即指定哪些被緩存，可以指定多個(gè)被緩存。

這里以字符串為例，指定多個(gè)組件緩存，語法是用逗號隔開。

如下： 

// 指定 home 組件和 about 組件被緩存
<keep-alive include="home,about">
    <router-view></router-view>
</keep-alive>

② exclude：排除，優(yōu)先級大于 include

同上，指定哪些組件不被緩存。

// 除了home組件和about組件，別的都緩存
<keep-alive exclude="home,about">
    <router-view></router-view>
</keep-alive>

使用 include 和 exclude 屬性時(shí)，緩存組件的名稱 name 一定要賦值，否則無法識別到對應(yīng)的路由組件。 

如果 name 選項(xiàng)不可用，則匹配它的局部注冊名稱 (父組件 components 選項(xiàng)的鍵值)，匿名組件不能被匹配。

當(dāng)使用正則或者是數(shù)組時(shí)，要記得使用v-bind 。 

<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
 
<!-- 正則表達(dá)式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 數(shù)組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
 

③ max：定義組件的最大緩存?zhèn)€數(shù)

內(nèi)部采用LRU算法用于維護(hù)緩存列表。如果緩存?zhèn)€數(shù)超過最大數(shù)，那么會將最久沒有被訪問到的組件移出緩存列表，也就是銷毀組件。

四、使用 keep-alive 的鉤子函數(shù)執(zhí)行順序問題

keep-alive 提供了兩個(gè)鉤子函數(shù)： activated 鉤子和 deactivated 鉤子。

• activated：當(dāng)組件被激活（使用）的時(shí)候觸發(fā)，即進(jìn)入這個(gè)頁面的時(shí)候觸發(fā)，常用于執(zhí)行一些數(shù)據(jù)初始化或者異步操作；
• deactivated：當(dāng)組件失活（不被使用）的時(shí)候觸發(fā)，即離開這個(gè)頁面的時(shí)候觸發(fā)；

① 首次進(jìn)出組件時(shí)：

beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated

② 再次進(jìn)出組件時(shí)：

beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

③ 結(jié)論 

初始進(jìn)入和離開 created ---> mounted ---> activated --> deactivated

后續(xù)進(jìn)入和離開 activated --> deactivated

五、應(yīng)用場景

① 緩存動態(tài)組件

② 緩存路由

Vue2寫法： 

Vue3寫法：

在緩存路由的時(shí)候，需要借助 v-slot 插槽 + 動態(tài)組件的方式，實(shí)現(xiàn)路由的緩存。

也可以通過meta屬性指定哪些頁面需要緩存

③ 實(shí)際場景 

1）查看表格某條數(shù)據(jù)的詳情頁，返回還是之前的狀態(tài)。比如還是之前的篩選結(jié)果，還是之前的頁數(shù)等；

2）填寫的表單的內(nèi)容路由跳轉(zhuǎn)返回還在。比如 input框、下選擇拉框、開關(guān)切換等用戶輸入了一大把東西，跳轉(zhuǎn)再回來不能清空啊，不用讓用戶再寫一遍。

六、原理

keep-alive 是一個(gè)緩存，會標(biāo)記這個(gè)虛擬節(jié)點(diǎn)被緩存過了。

后續(xù)就不會重新初始化，也不會進(jìn)行銷毀。 

keep-alive是Vue中內(nèi)置的一個(gè)組件，源碼位置：src/core/components/keep-alive.js

解析： 

abstract：true，標(biāo)記這個(gè)組件沒有任何含義，不需要記錄父子關(guān)系中。

export default {
  name: 'keep-alive',
  abstract: true,
 
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },
 
  created () {
    this.cache = Object.create(null)
    this.keys = []
  },
 
  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },
 
  mounted () {
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },
 
  render() {
    /* 獲取默認(rèn)插槽中的第一個(gè)組件節(jié)點(diǎn) */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 獲取該組件節(jié)點(diǎn)的componentOptions */
    const componentOptions = vnode && vnode.componentOptions
 
    if (componentOptions) {
      /* 獲取該組件節(jié)點(diǎn)的名稱，優(yōu)先獲取組件的name字段，如果name不存在則獲取組件的tag */
      const name = getComponentName(componentOptions)
 
      const { include, exclude } = this
      /* 如果name不在inlcude中或者存在于exlude中則表示不緩存，直接返回vnode */
      if (
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }
 
      const { cache, keys } = this
      /* 獲取組件的key值 */
      const key = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
     /*  拿到key值后去this.cache對象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存 */
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      }
        /* 如果沒有命中緩存，則將其設(shè)置進(jìn)緩存 */
        else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        /* 如果配置了max并且緩存的長度超過了this.max，則從緩存中刪除第一個(gè) */
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }
 
      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

可以看到該組件沒有template，而是用了render，在組件渲染的時(shí)候會自動執(zhí)行render函數(shù)

this.cache是一個(gè)對象，用來存儲需要緩存的組件，它將以如下形式存儲：

this.cache = {
    'key1':'組件1',
    'key2':'組件2',
    // ...
}

在組件銷毀的時(shí)候執(zhí)行pruneCacheEntry函數(shù)：

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  /* 判斷當(dāng)前沒有處于被渲染狀態(tài)的組件，將其銷毀*/
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

在mounted鉤子函數(shù)中觀測 include 和 exclude 的變化，如下： 

mounted () {
    this.$watch('include', val => {
        pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
        pruneCache(this, name => !matches(val, name))
    })
}

如果include 或exclude 發(fā)生了變化，即表示定義需要緩存的組件的規(guī)則或者不需要緩存的組件的規(guī)則發(fā)生了變化，那么就執(zhí)行pruneCache函數(shù)，函數(shù)如下：

function pruneCache (keepAliveInstance, filter) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    const cachedNode = cache[key]
    if (cachedNode) {
      const name = getComponentName(cachedNode.componentOptions)
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}

在該函數(shù)內(nèi)對this.cache對象進(jìn)行遍歷，取出每一項(xiàng)的name值，用其與新的緩存規(guī)則進(jìn)行匹配，如果匹配不上，則表示在新的緩存規(guī)則下該組件已經(jīng)不需要被緩存，則調(diào)用pruneCacheEntry函數(shù)將其從this.cache對象剔除即可。

關(guān)于keep-alive的最強(qiáng)大緩存功能是在render函數(shù)中實(shí)現(xiàn)，首先獲取組件的key值：

const key = vnode.key == null? 
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key

拿到key值后去this.cache對象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存，如下：

/* 如果命中緩存，則直接從緩存中拿 vnode 的組件實(shí)例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 調(diào)整該組件key的順序，將其從原來的地方刪掉并重新放在最后一個(gè) */
    remove(keys, key)
    keys.push(key)
} 

直接從緩存中拿 vnode 的組件實(shí)例，此時(shí)重新調(diào)整該組件key的順序，將其從原來的地方刪掉并重新放在this.keys中最后一個(gè)。

this.cache對象中沒有該key值的情況，如下：

/* 如果沒有命中緩存，則將其設(shè)置進(jìn)緩存 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果配置了max并且緩存的長度超過了this.max，則從緩存中刪除第一個(gè) */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}

表明該組件還沒有被緩存過，則以該組件的key為鍵，組件vnode為值，將其存入this.cache中，并且把key存入this.keys中。

此時(shí)再判斷this.keys中緩存組件的數(shù)量是否超過了設(shè)置的最大緩存數(shù)量值this.max，如果超過了，則把第一個(gè)緩存組件刪掉。

七、keep-alive存在的問題：緩存后如何獲取數(shù)據(jù)

存在的問題：數(shù)據(jù)更新問題，緩存的組件重新進(jìn)入不會再觸發(fā)created生命周期中的方法，因此數(shù)據(jù)不會更新。

解決辦法： 

① 在 beforeRouteEnter 鉤子函數(shù)中，在路由進(jìn)入之前先獲取數(shù)據(jù)：

每次組件渲染或者每次進(jìn)入路由的時(shí)候，都會執(zhí)行 beforeRouteEnter 。

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次進(jìn)入路由執(zhí)行
        vm.getData()  // 獲取數(shù)據(jù)
    })
},

② 在 activated 生命周期中，獲取數(shù)據(jù)：

在 keep-alive 緩存的組件被激活的時(shí)候，都會執(zhí)行 actived 鉤子。

activated() {
    this.getData() // 獲取數(shù)據(jù)
},

注意：服務(wù)器端渲染期間 activated 不被調(diào)用。

八、總結(jié)

總的來說，使用 keep-alive可以有效地提高應(yīng)用的響應(yīng)速度和性能，特別是在需要頻繁切換組件的情況下。

但是在使用 keep-alive 時(shí)，要注意數(shù)據(jù)的更新問題，避免出現(xiàn)數(shù)據(jù)無法更新的情況。

keep-alive 是一個(gè)緩存，會標(biāo)記這個(gè)虛擬節(jié)點(diǎn)被緩存過了，后續(xù)就不會重新初始化，也不會進(jìn)行銷毀。 

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論