keep-alive原理的示例分析

這篇文章將為大家詳細講解有關keep-alive原理的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、前言

本文介紹的內容包括：

• keep-alive用法：動態組件&vue-router

• keep-alive源碼解析

• keep-alive組件及其包裹組件的鉤子

• keep-alive組件及其包裹組件的渲染

二、keep-alive介紹與應用

2.1 keep-alive是什么

keep-alive是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中；使用keep-alive包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

2.2 一個場景

用戶在某個列表頁面選擇篩選條件過濾出一份數據列表，由列表頁面進入數據詳情頁面，再返回該列表頁面，我們希望：列表頁面可以保留用戶的篩選（或選中）狀態。keep-alive就是用來解決這種場景。當然keep-alive不僅僅是能夠保存頁面/組件的狀態這么簡單，它還可以避免組件反復創建和渲染，有效提升系統性能。 總的來說，keep-alive用于保存組件的渲染狀態。

2.3 keep-alive用法 在動態組件中的應用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
 <component :is="currentComponent"></component>
</keep-alive>

在vue-router中的應用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
 <router-view></router-view>
</keep-alive>

include 定義緩存白名單，keep-alive會緩存命中的組件； exclude 定義緩存黑名單，被命中的組件將不會被緩存； max 定義緩存組件上限，超出上限使用LRU的策略置換緩存數據。

三、源碼剖析

keep-alive.js 內部另外還定義了一些工具函數，我們按住不表，先看它對外暴露的對象。

// src/core/components/keep-alive.js
export default {
 name: 'keep-alive',
 abstract: true, // 判斷當前組件虛擬dom是否渲染成真是dom的關鍵

 props: {
  include: patternTypes, // 緩存白名單
  exclude: patternTypes, // 緩存黑名單
  max: [String, Number] // 緩存的組件實例數量上限
 },

 created () {
  this.cache = Object.create(null) // 緩存虛擬dom
  this.keys = [] // 緩存的虛擬dom的健集合
 },

 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 () {
  // 先省略...
 }
}

可以看出，與我們定義組件的過程一樣，先是設置組件名為 keep-alive ，其次定義了一個 abstract 屬性，值為 true 。這個屬性在vue的官方教程并未提及，卻至關重要，后面的渲染過程會用到。 props 屬性定義了keep-alive組件支持的全部參數。

keep-alive在它生命周期內定義了三個鉤子函數：

created

初始化兩個對象分別緩存VNode（虛擬DOM）和VNode對應的健集合

destroyed

刪除 this.cache 中緩存的VNode實例。我們留意到，這里不是簡單地將 this.cache 至為 null ，而是遍歷調用 pruneCacheEntry 函數刪除。

// src/core/components/keep-alive.js
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() // 執行組件的destory鉤子函數
 }
 cache[key] = null
 remove(keys, key)
}

刪除緩存VNode還要對應執行組件實例的 destory 鉤子函數

mounted

在 mounted 這個鉤子中對 include 和 exclude 參數進行監聽，然后實時地更新（刪除） this.cache 對象數據。 pruneCache 函數的核心也是去調用 pruneCacheEntry 。

render

 // src/core/components/keep-alive.js
 render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot) // 找到第一個子組件對象
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  if (componentOptions) { // 存在組件參數
   // check pattern
   const name: ?string = getComponentName(componentOptions) // 組件名
   const { include, exclude } = this
   if ( // 條件匹配
    // not included
    (include && (!name || !matches(include, name))) ||
    // excluded
    (exclude && name && matches(exclude, name))
   ) {
    return vnode
   }

   const { cache, keys } = this
   const key: ?string = vnode.key == null // 定義組件的緩存key
    // 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
   if (cache[key]) { // 已經緩存過該組件
    vnode.componentInstance = cache[key].componentInstance
    // make current key freshest
    remove(keys, key)
    keys.push(key) // 調整key排序
   } else {
    cache[key] = vnode // 緩存組件對象
    keys.push(key)
    // prune oldest entry
    if (this.max && keys.length > parseInt(this.max)) { // 超過緩存數限制，將第一個刪除
     pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
   }

   vnode.data.keepAlive = true // 渲染和執行被包裹組件的鉤子函數需要用到
  }
  return vnode || (slot && slot[0])
 }

第一步：獲取keep-alive包裹著的第一個子組件對象及其組件名；

第二步：根據設定的黑白名單（如果有）進行條件匹配，決定是否緩存。不匹配，直接返回組件實例（VNode），否則執行第三步；

第三步：根據組件ID和tag生成緩存Key，并在緩存對象中查找是否已緩存過該組件實例。如果存在，直接取出緩存值并更新該 key 在 this.keys 中的位置（更新key的位置是實現LRU置換策略的關鍵），否則執行第四步；

第四步：在 this.cache 對象中存儲該組件實例并保存 key 值，之后檢查緩存的實例數量是否超過 max 的設置值，超過則根據LRU置換策略刪除最近最久未使用的實例（即是下標為0的那個key）。

第五步：最后并且很重要，將該組件實例的 keepAlive 屬性值設置為 true 。這個在 @ 不可忽視：鉤子函數 章節會再次出場。

四、重頭戲：渲染

4.1 Vue的渲染過程

借一張圖看下Vue渲染的整個過程：

Vue的渲染是從圖中的 render 階段開始的，但keep-alive的渲染是在patch階段，這是構建組件樹（虛擬DOM樹），并將VNode轉換成真正DOM節點的過程。

簡單描述從 render 到 patch 的過程

我們從最簡單的 new Vue 開始：

import App from './App.vue'

new Vue({
 render: h => h(App),
}).$mount('#app')

• Vue在渲染的時候先調用原型上的 _render 函數將組件對象轉化為一個VNode實例；而 _render 是通過調用 createElement 和 createEmptyVNode 兩個函數進行轉化；

• createElement 的轉化過程會根據不同的情形選擇 new VNode 或者調用 createComponent 函數做VNode實例化；

• 完成VNode實例化后，這時候Vue調用原型上的 _update 函數把VNode渲染為真實DOM，這個過程又是通過調用 __patch__ 函數完成的（這就是pacth階段了）

用一張圖表達：

4.2 keep-alive組件的渲染

我們用過keep-alive都知道，它不會生成真正的DOM節點，這是怎么做到的？

// src/core/instance/lifecycle.js
export function initLifecycle (vm: Component) {
 const options = vm.$options
 // 找到第一個非abstract的父組件實例
 let parent = options.parent
 if (parent && !options.abstract) {
  while (parent.$options.abstract && parent.$parent) {
   parent = parent.$parent
  }
  parent.$children.push(vm)
 }
 vm.$parent = parent
 // ...
}

Vue在初始化生命周期的時候，為組件實例建立父子關系會根據 abstract 屬性決定是否忽略某個組件。在keep-alive中，設置了 abstract: true ，那Vue就會跳過該組件實例。

keep-alive包裹的組件是如何使用緩存的？

在 patch 階段，會執行 createComponent 函數：

// src/core/vdom/patch.js
function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
  let i = vnode.data
  if (isDef(i)) {
   const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
   if (isDef(i = i.hook) && isDef(i = i.init)) {
    i(vnode, false /* hydrating */)
   }

   if (isDef(vnode.componentInstance)) {
    initComponent(vnode, insertedVnodeQueue)
    insert(parentElm, vnode.elm, refElm) // 將緩存的DOM（vnode.elm）插入父元素中
    if (isTrue(isReactivated)) {
     reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm)
    }
    return true
   }
  }
 }

在首次加載被包裹組件時，由 keep-alive.js 中的 render 函數可知， vnode.componentInstance 的值是 undefined ， keepAlive 的值是 true ，因為keep-alive組件作為父組件，它的 render 函數會先于被包裹組件執行；那么就只執行到 i(vnode, false /* hydrating */) ，后面的邏輯不再執行；

再次訪問被包裹組件時， vnode.componentInstance 的值就是已經緩存的組件實例，那么會執行 insert(parentElm, vnode.elm, refElm) 邏輯，這樣就直接把上一次的DOM插入到了父元素中。

五、不可忽視：鉤子函數

 5.1 只執行一次的鉤子

一般的組件，每一次加載都會有完整的生命周期，即生命周期里面對應的鉤子函數都會被觸發，為什么被keep-alive包裹的組件卻不是呢？ 我們在 @ 源碼剖析 章節分析到，被緩存的組件實例會為其設置 keepAlive = true ，而在初始化組件鉤子函數中：

// src/core/vdom/create-component.js
const componentVNodeHooks = {
 init (vnode: VNodeWithData, hydrating: boolean): ?boolean {
  if (
   vnode.componentInstance &&
   !vnode.componentInstance._isDestroyed &&
   vnode.data.keepAlive
  ) {
   // kept-alive components, treat as a patch
   const mountedNode: any = vnode // work around flow
   componentVNodeHooks.prepatch(mountedNode, mountedNode)
  } else {
   const child = vnode.componentInstance = createComponentInstanceForVnode(
    vnode,
    activeInstance
   )
   child.$mount(hydrating ? vnode.elm : undefined, hydrating)
  }
 }
 // ...
}

可以看出，當 vnode.componentInstance 和 keepAlive 同時為truly值時，不再進入 $mount 過程，那 mounted 之前的所有鉤子函數（ beforeCreate 、 created 、 mounted ）都不再執行。

5.2 可重復的activated

在 patch 的階段，最后會執行 invokeInsertHook 函數，而這個函數就是去調用組件實例（VNode）自身的 insert 鉤子：

// src/core/vdom/patch.js
 function invokeInsertHook (vnode, queue, initial) {
  if (isTrue(initial) && isDef(vnode.parent)) {
   vnode.parent.data.pendingInsert = queue
  } else {
   for (let i = 0; i < queue.length; ++i) {
    queue[i].data.hook.insert(queue[i]) // 調用VNode自身的insert鉤子函數
   }
  }
 }

再看 insert 鉤子：

// src/core/vdom/create-component.js
const componentVNodeHooks = {
 // init()
 insert (vnode: MountedComponentVNode) {
  const { context, componentInstance } = vnode
  if (!componentInstance._isMounted) {
   componentInstance._isMounted = true
   callHook(componentInstance, 'mounted')
  }
  if (vnode.data.keepAlive) {
   if (context._isMounted) {
    queueActivatedComponent(componentInstance)
   } else {
    activateChildComponent(componentInstance, true /* direct */)
   }
  }
 // ...
}

在這個鉤子里面，調用了 activateChildComponent 函數遞歸地去執行所有子組件的 activated 鉤子函數：

// src/core/instance/lifecycle.js
export function activateChildComponent (vm: Component, direct?: boolean) {
 if (direct) {
  vm._directInactive = false
  if (isInInactiveTree(vm)) {
   return
  }
 } else if (vm._directInactive) {
  return
 }
 if (vm._inactive || vm._inactive === null) {
  vm._inactive = false
  for (let i = 0; i < vm.$children.length; i++) {
   activateChildComponent(vm.$children[i])
  }
  callHook(vm, 'activated')
 }
}

相反地， deactivated 鉤子函數也是一樣的原理，在組件實例（VNode）的 destroy 鉤子函數中調用 deactivateChildComponent 函數。

關于“keep-alive原理的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。