// keep-alive組件搭配動(dòng)態(tài)組件的用法，還要其他的用法參見(jiàn)官網(wǎng)
<keep-alive
 include="['componentNameA', 'componentNameB']"
 exclude="'componentNameC'"
 :max="10">
 <component :is="view"></component>
</keep-alive>

// isRegExp函數(shù)判斷是不是正則表達(dá)式，remove移除數(shù)組中的某一個(gè)成員
// getFirstComponentChild獲取VNode數(shù)組的第一個(gè)有效組件
import { isRegExp, remove } from 'shared/util'
import { getFirstComponentChild } from 'core/vdom/helpers/index'
​
type VNodeCache = { [key: string]: ?VNode }; // 緩存組件VNode的緩存類型
​
// 通過(guò)組件的name或組件tag來(lái)獲取組件名（上面注意的第二點(diǎn)）
function getComponentName (opts: ?VNodeComponentOptions): ?string {
 return opts && (opts.Ctor.options.name || opts.tag)
}
​
// 判斷include或exclude跟組件的name是否匹配成功
function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
 if (Array.isArray(pattern)) {
 return pattern.indexOf(name) > -1 // include或exclude是數(shù)組的情況
 } else if (typeof pattern === 'string') {
 return pattern.split(',').indexOf(name) > -1 // include或exclude是字符串的情況
 } else if (isRegExp(pattern)) {
 return pattern.test(name) // include或exclude是正則表達(dá)式的情況
 }
 return false // 都沒(méi)匹配上（上面注意的二三點(diǎn)）
}
​
// 銷毀緩存
function pruneCache (keepAliveInstance: any, filter: Function) {
 const { cache, keys, _vnode } = keepAliveInstance // keep-alive組件實(shí)例
 for (const key in cache) {
 const cachedNode: ?VNode = cache[key] // 已經(jīng)被緩存的組件
 if (cachedNode) {
  const name: ?string = getComponentName(cachedNode.componentOptions)
  // 若name存在且不能跟include或exclude匹配上就銷毀這個(gè)已經(jīng)緩存的組件
  if (name && !filter(name)) {
  pruneCacheEntry(cache, key, keys, _vnode)
  }
 }
 }
}
​
// 銷毀緩存的入口
function pruneCacheEntry (
 cache: VNodeCache,
 key: string,
 keys: Array<string>,
 current?: VNode
) {
 const cached = cache[key] // 被緩存過(guò)的組件
 // “已經(jīng)被緩存的組件是否繼續(xù)被緩存” 有變動(dòng)時(shí)
 // 若組件被緩存命中過(guò)且當(dāng)前組件不存在或緩存命中組件的tag和當(dāng)前組件的tag不相等
 if (cached && (!current || cached.tag !== current.tag)) {
 // 說(shuō)明現(xiàn)在這個(gè)組件不需要被繼續(xù)緩存，銷毀這個(gè)組件實(shí)例
 cached.componentInstance.$destroy()
 }
 cache[key] = null // 把緩存中這個(gè)組件置為null
 remove(keys, key) // 把這個(gè)組件的key移除出keys數(shù)組
}
​
// 示例類型
const patternTypes: Array<Function> = [String, RegExp, Array]
​
// 向外暴露keep-alive組件的一些選項(xiàng)
export default {
 name: 'keep-alive', // 組件名
 abstract: true, // keep-alive是抽象組件
​
 // 用keep-alive組件時(shí)傳入的三個(gè)props
 props: {
 include: patternTypes,
 exclude: patternTypes,
 max: [String, Number]
 },
​
 created () {
 this.cache = Object.create(null) // 存儲(chǔ)需要緩存的組件
 this.keys = [] // 存儲(chǔ)每個(gè)需要緩存的組件的key，即對(duì)應(yīng)this.cache對(duì)象中的鍵值
 },
​
 // 銷毀keep-alive組件的時(shí)候，對(duì)緩存中的每個(gè)組件執(zhí)行銷毀
 destroyed () {
 for (const key in this.cache) {
  pruneCacheEntry(this.cache, key, this.keys)
 }
 },
​
 // keep-alive組件掛載時(shí)監(jiān)聽(tīng)include和exclude的變化，條件滿足時(shí)就銷毀已緩存的組件
 mounted () {
 this.$watch('include', val => {
  pruneCache(this, name => matches(val, name))
 })
 this.$watch('exclude', val => {
  pruneCache(this, name => !matches(val, name))
 })
 },
​
 // 重點(diǎn)來(lái)了
 render () {
 const slot = this.$slots.default // keep-alive組件的默認(rèn)插槽
 const vnode: VNode = getFirstComponentChild(slot) // 獲取默認(rèn)插槽的第一個(gè)有效組件
 // 如果vnode存在就取vnode的選項(xiàng)
 const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (componentOptions) {
  //獲取第一個(gè)有效組件的name
  const name: ?string = getComponentName(componentOptions)
  const { include, exclude } = this // props傳遞來(lái)的include和exclude
  if (
  // 若include存在且name不存在或name未匹配上
  (include && (!name || !matches(include, name))) ||
  // 若exclude存在且name存在或name匹配上
  (exclude && name && matches(exclude, name))
  ) {
  return vnode // 說(shuō)明不用緩存，直接返回這個(gè)組件進(jìn)行渲染
  }
  
  // 匹配上就需要進(jìn)行緩存操作
  const { cache, keys } = this // keep-alive組件的緩存組件和緩存組件對(duì)應(yīng)的key
  // 獲取第一個(gè)有效組件的key
  const key: ?string = vnode.key == null
  // 同一個(gè)構(gòu)造函數(shù)可以注冊(cè)為不同的本地組件
  // 所以僅靠cid是不夠的，進(jìn)行拼接一下
  ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.key
  // 如果這個(gè)組件命中緩存
  if (cache[key]) {
  // 這個(gè)組件的實(shí)例用緩存中的組件實(shí)例替換
  vnode.componentInstance = cache[key].componentInstance
  // 更新當(dāng)前key在keys中的位置
  remove(keys, key) // 把當(dāng)前key從keys中移除
  keys.push(key) // 再放到keys的末尾
  } else {
  // 如果沒(méi)有命中緩存，就把這個(gè)組件加入緩存中
  cache[key] = vnode
  keys.push(key) // 把這個(gè)組件的key放到keys的末尾
  // 如果緩存中的組件個(gè)數(shù)超過(guò)傳入的max，銷毀緩存中的LRU組件
  if (this.max && keys.length > parseInt(this.max)) {
   pruneCacheEntry(cache, keys[0], keys, this._vnode)
  }
  }
​
  vnode.data.keepAlive = true // 設(shè)置這個(gè)組件的keepAlive屬性為true
 }
 // 若第一個(gè)有效的組件存在，但其componentOptions不存在，就返回這個(gè)組件進(jìn)行渲染
 // 或若也不存在有效的第一個(gè)組件，但keep-alive組件的默認(rèn)插槽存在，就返回默認(rèn)插槽的第一個(gè)組件進(jìn)行渲染
 return vnode || (slot && slot[0])
 }
}