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

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