聊聊對vue內建元件keep-alive的理解

Keep-alive 是什麼？下面本篇文章帶大家聊聊對內建元件keep-alive的理解，希望對大家有所幫助！

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

一、Keep-alive 是什麼

keep-alive是vue中的內建元件，能在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM 。【相關推薦：、】

keep-alive 包裹動態元件時，會快取不活動的元件範例，而不是銷燬它們。

keep-alive可以設定以下props屬性：

include - 字串或正規表示式。只有名稱匹配的元件會被快取
exclude - 字串或正規表示式。任何名稱匹配的元件都不會被快取
max - 數位。最多可以快取多少元件範例

關於keep-alive的基本用法：

<keep-alive>
  <component :is="view"></component>
</keep-alive>
登入後複製

使用includes和exclude：

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正規表示式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 陣列 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
登入後複製

匹配首先檢查元件自身的 name 選項，如果 name 選項不可用，則匹配它的區域性註冊名稱 (父元件 components 選項的鍵值)，匿名元件不能被匹配

設定了 keep-alive 快取的元件，會多出兩個生命週期勾點（activated與deactivated）：

首次進入元件時：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated
再次進入元件時：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated

二、使用場景

使用原則：當我們在某些場景下不需要讓頁面重新載入時我們可以使用keepalive

舉個栗子:

當我們從首頁–>列表頁–>商詳頁–>再返回，這時候列表頁應該是需要keep-alive

從首頁–>列表頁–>商詳頁–>返回到列表頁(需要快取)–>返回到首頁(需要快取)–>再次進入列表頁(不需要快取)，這時候可以按需來控制頁面的keep-alive

在路由中設定keepAlive屬性判斷是否需要快取

{
  path: 'list',
  name: 'itemList', // 列表頁
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '列表頁'
 }
}
登入後複製

使用<keep-alive>

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要快取的檢視元件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要快取的檢視元件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
登入後複製

三、原理分析

keep-alive是vue中內建的一個元件

原始碼位置：src/core/components/keep-alive.js

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() {
    /* 獲取預設插槽中的第一個元件節點 */
    const slot = this.$slots.default
    const vnode = getFirstComponentChild(slot)
    /* 獲取該元件節點的componentOptions */
    const componentOptions = vnode && vnode.componentOptions

    if (componentOptions) {
      /* 獲取該元件節點的名稱，優先獲取元件的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)
      }
        /* 如果沒有命中快取，則將其設定進快取 */
        else {
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        /* 如果設定了max並且快取的長度超過了this.max，則從快取中刪除第一個 */
        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，在元件渲染的時候會自動執行render函數

this.cache是一個物件，用來儲存需要快取的元件，它將以如下形式儲存：

this.cache = {
    'key1':'元件1',
    'key2':'元件2',
    // ...
}
登入後複製

在元件銷燬的時候執行pruneCacheEntry函數

function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  /* 判斷當前沒有處於被渲染狀態的元件，將其銷燬*/
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}
登入後複製

在mounted勾點函數中觀測 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 發生了變化，即表示定義需要快取的元件的規則或者不需要快取的元件的規則發生了變化，那麼就執行pruneCache函數，函數如下：

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)
      }
    }
  }
}
登入後複製

在該函數內對this.cache物件進行遍歷，取出每一項的name值，用其與新的快取規則進行匹配，如果匹配不上，則表示在新的快取規則下該元件已經不需要被快取，則呼叫pruneCacheEntry函數將其從this.cache物件剔除即可

關於keep-alive的最強大快取功能是在render函數中實現

首先獲取元件的key值：

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

拿到key值後去this.cache物件中去尋找是否有該值，如果有則表示該元件有快取，即命中快取，如下：

/* 如果命中快取，則直接從快取中拿 vnode 的元件範例 */
if (cache[key]) {
    vnode.componentInstance = cache[key].componentInstance
    /* 調整該元件key的順序，將其從原來的地方刪掉並重新放在最後一個 */
    remove(keys, key)
    keys.push(key)
}
登入後複製

直接從快取中拿 vnode 的元件範例，此時重新調整該元件key的順序，將其從原來的地方刪掉並重新放在this.keys中最後一個

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

/* 如果沒有命中快取，則將其設定進快取 */
else {
    cache[key] = vnode
    keys.push(key)
    /* 如果設定了max並且快取的長度超過了this.max，則從快取中刪除第一個 */
    if (this.max && keys.length > parseInt(this.max)) {
        pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
}
登入後複製

表明該元件還沒有被快取過，則以該元件的key為鍵，元件vnode為值，將其存入this.cache中，並且把key存入this.keys中

此時再判斷this.keys中快取元件的數量是否超過了設定的最大快取數量值this.max，如果超過了，則把第一個快取元件刪掉

四、思考題：快取後如何獲取資料

解決方案可以有以下兩種：

beforeRouteEnter
actived

beforeRouteEnter

每次元件渲染的時候，都會執行beforeRouteEnter

beforeRouteEnter(to, from, next){
    next(vm=>{
        console.log(vm)
        // 每次進入路由執行
        vm.getData()  // 獲取資料
    })
},
登入後複製

actived

在keep-alive快取的元件被啟用的時候，都會執行actived勾點

activated(){
   this.getData() // 獲取資料
},
登入後複製

注意：伺服器端渲染期間avtived不被呼叫

（學習視訊分享：、）

以上就是聊聊對vue內建元件keep-alive的理解的詳細內容，更多請關注TW511.COM其它相關文章！