keep-alive原理的示例分析

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

一、前言

本文介紹的內(nèi)容包括：

• keep-alive用法：動(dòng)態(tài)組件&vue-router

• keep-alive源碼解析

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

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

二、keep-alive介紹與應(yīng)用

2.1 keep-alive是什么

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

2.2 一個(gè)場(chǎng)景

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

2.3 keep-alive用法 在動(dòng)態(tài)組件中的應(yīng)用

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

在vue-router中的應(yīng)用

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

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

三、源碼剖析

keep-alive.js 內(nèi)部另外還定義了一些工具函數(shù)，我們按住不表，先看它對(duì)外暴露的對(duì)象。

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

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

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

 destroyed () {
  for (const key in this.cache) { // 刪除所有的緩存
   pruneCacheEntry(this.cache, key, this.keys)
  }
 },

 mounted () {
  // 實(shí)時(shí)監(jiān)聽黑白名單的變動(dòng)
  this.$watch('include', val => {
   pruneCache(this, name => matches(val, name))
  })
  this.$watch('exclude', val => {
   pruneCache(this, name => !matches(val, name))
  })
 },

 render () {
  // 先省略...
 }
}

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

keep-alive在它生命周期內(nèi)定義了三個(gè)鉤子函數(shù)：

created

初始化兩個(gè)對(duì)象分別緩存VNode（虛擬DOM）和VNode對(duì)應(yīng)的健集合

destroyed

刪除 this.cache 中緩存的VNode實(shí)例。我們留意到，這里不是簡(jiǎn)單地將 this.cache 至為 null ，而是遍歷調(diào)用 pruneCacheEntry 函數(shù)刪除。

// 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() // 執(zhí)行組件的destory鉤子函數(shù)
 }
 cache[key] = null
 remove(keys, key)
}

刪除緩存VNode還要對(duì)應(yīng)執(zhí)行組件實(shí)例的 destory 鉤子函數(shù)

mounted

在 mounted 這個(gè)鉤子中對(duì) include 和 exclude 參數(shù)進(jìn)行監(jiān)聽，然后實(shí)時(shí)地更新（刪除） this.cache 對(duì)象數(shù)據(jù)。 pruneCache 函數(shù)的核心也是去調(diào)用 pruneCacheEntry 。

render

 // src/core/components/keep-alive.js
 render () {
  const slot = this.$slots.default
  const vnode: VNode = getFirstComponentChild(slot) // 找到第一個(gè)子組件對(duì)象
  const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  if (componentOptions) { // 存在組件參數(shù)
   // 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]) { // 已經(jīng)緩存過該組件
    vnode.componentInstance = cache[key].componentInstance
    // make current key freshest
    remove(keys, key)
    keys.push(key) // 調(diào)整key排序
   } else {
    cache[key] = vnode // 緩存組件對(duì)象
    keys.push(key)
    // prune oldest entry
    if (this.max && keys.length > parseInt(this.max)) { // 超過緩存數(shù)限制，將第一個(gè)刪除
     pruneCacheEntry(cache, keys[0], keys, this._vnode)
    }
   }

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

第一步：獲取keep-alive包裹著的第一個(gè)子組件對(duì)象及其組件名；

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

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

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

第五步：最后并且很重要，將該組件實(shí)例的 keepAlive 屬性值設(shè)置為 true 。這個(gè)在 @ 不可忽視：鉤子函數(shù) 章節(jié)會(huì)再次出場(chǎng)。

四、重頭戲：渲染

4.1 Vue的渲染過程

借一張圖看下Vue渲染的整個(gè)過程：

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

簡(jiǎn)單描述從 render 到 patch 的過程

我們從最簡(jiǎn)單的 new Vue 開始：

import App from './App.vue'

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

• Vue在渲染的時(shí)候先調(diào)用原型上的 _render 函數(shù)將組件對(duì)象轉(zhuǎn)化為一個(gè)VNode實(shí)例；而 _render 是通過調(diào)用 createElement 和 createEmptyVNode 兩個(gè)函數(shù)進(jìn)行轉(zhuǎn)化；

• createElement 的轉(zhuǎn)化過程會(huì)根據(jù)不同的情形選擇 new VNode 或者調(diào)用 createComponent 函數(shù)做VNode實(shí)例化；

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

用一張圖表達(dá)：

4.2 keep-alive組件的渲染

我們用過keep-alive都知道，它不會(huì)生成真正的DOM節(jié)點(diǎn)，這是怎么做到的？

// src/core/instance/lifecycle.js
export function initLifecycle (vm: Component) {
 const options = vm.$options
 // 找到第一個(gè)非abstract的父組件實(shí)例
 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在初始化生命周期的時(shí)候，為組件實(shí)例建立父子關(guān)系會(huì)根據(jù) abstract 屬性決定是否忽略某個(gè)組件。在keep-alive中，設(shè)置了 abstract: true ，那Vue就會(huì)跳過該組件實(shí)例。

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

在 patch 階段，會(huì)執(zhí)行 createComponent 函數(shù)：

// 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
   }
  }
 }

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

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

五、不可忽視：鉤子函數(shù)

 5.1 只執(zhí)行一次的鉤子

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

// 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)
  }
 }
 // ...
}

可以看出，當(dāng) vnode.componentInstance 和 keepAlive 同時(shí)為truly值時(shí)，不再進(jìn)入 $mount 過程，那 mounted 之前的所有鉤子函數(shù)（ beforeCreate 、 created 、 mounted ）都不再執(zhí)行。

5.2 可重復(fù)的activated

在 patch 的階段，最后會(huì)執(zhí)行 invokeInsertHook 函數(shù)，而這個(gè)函數(shù)就是去調(diào)用組件實(shí)例（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]) // 調(diào)用VNode自身的insert鉤子函數(shù)
   }
  }
 }

再看 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 */)
   }
  }
 // ...
}

在這個(gè)鉤子里面，調(diào)用了 activateChildComponent 函數(shù)遞歸地去執(zhí)行所有子組件的 activated 鉤子函數(shù)：

// 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 鉤子函數(shù)也是一樣的原理，在組件實(shí)例（VNode）的 destroy 鉤子函數(shù)中調(diào)用 deactivateChildComponent 函數(shù)。

關(guān)于“keep-alive原理的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。