keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：

  • 一般结合路由和动态组件一起使用，用于缓存组件；
  • 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存， exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；
  • 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated ，当组件被移除时，触发钩子函数 deactivated
  • 2.5.0 新增 max 属性，表示最多可缓存多少组件实例，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

使用场景

在动态组件上使用 keep-alive

当我们使用动态组件使用 is 在组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

  1. <!-- 失活的组件将会被缓存！-->
  2. <keep-alive>
  3.   <component v-bind:is="currentTabComponent"></component>
  4. </keep-alive>

在 vue-router 中应用

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

源码

  1. // src/core/components/keep-alive.js
  2. /* @flow */
  4. import { isRegExp, remove } from 'shared/util'
  5. import { getFirstComponentChild } from 'core/vdom/helpers/index'
  7. type VNodeCache = { [key: string]: ?VNode };
  9. function getComponentName (opts: ?VNodeComponentOptions): ?string {
  10.   return opts && (opts.Ctor.options.name || opts.tag)
  11. }
  13. function matches (pattern: string | RegExp | Array<string>, name: string): boolean {
  14.   if (Array.isArray(pattern)) {
  15.     return pattern.indexOf(name) > -1
  16.   } else if (typeof pattern === 'string') {
  17.     return pattern.split(',').indexOf(name) > -1
  18.   } else if (isRegExp(pattern)) {
  19.     return pattern.test(name)
  20.   }
  21.   /* istanbul ignore next */
  22.   return false
  23. }
  25. function pruneCache (keepAliveInstance: any, filter: Function) {
  26.   const { cache, keys, _vnode } = keepAliveInstance
  27.   for (const key in cache) {
  28.     const cachedNode: ?VNode = cache[key]
  29.     if (cachedNode) {
  30.       const name: ?string = getComponentName(cachedNode.componentOptions)
  31.       if (name && !filter(name)) {
  32.         pruneCacheEntry(cache, key, keys, _vnode)
  33.       }
  34.     }
  35.   }
  36. }
  38. function pruneCacheEntry (
  39.   cache: VNodeCache,
  40.   key: string,
  41.   keys: Array<string>,
  42.   current?: VNode
  43. ) {
  44.   const cached = cache[key]
  45.   if (cached && (!current || cached.tag !== current.tag)) {
  46.     cached.componentInstance.$destroy()
  47.   }
  48.   cache[key] = null
  49.   remove(keys, key)
  50. }
  52. const patternTypes: Array<Function> = [String, RegExp, Array]
  54. export default {
  55.   name: 'keep-alive',
  56.   abstract: true,
  58.   props: {
  59.     include: patternTypes,
  60.     exclude: patternTypes,
  61.     max: [String, Number]
  62.   },
  64.   created () {
  65.     this.cache = Object.create(null)
  66.     this.keys = []
  67.   },
  69.   destroyed () {
  70.     for (const key in this.cache) {
  71.       pruneCacheEntry(this.cache, key, this.keys)
  72.     }
  73.   },
  75.   mounted () {
  76.     this.$watch('include', val => {
  77.       pruneCache(this, name => matches(val, name))
  78.     })
  79.     this.$watch('exclude', val => {
  80.       pruneCache(this, name => !matches(val, name))
  81.     })
  82.   },
  84.   render () {
  85.     const slot = this.$slots.default
  86.     const vnode: VNode = getFirstComponentChild(slot)
  87.     const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
  88.     if (componentOptions) {
  89.       // check pattern
  90.       const name: ?string = getComponentName(componentOptions)
  91.       const { include, exclude } = this
  92.       if (
  93.         // not included
  94.         (include && (!name || !matches(include, name))) ||
  95.         // excluded
  96.         (exclude && name && matches(exclude, name))
  97.       ) {
  98.         return vnode
  99.       }
  101.       const { cache, keys } = this
  102.       const key: ?string = vnode.key == null
  103.         // same constructor may get registered as different local components
  104.         // so cid alone is not enough (#3269)
  105.         ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  106.         : vnode.key
  107.       if (cache[key]) {
  108.         vnode.componentInstance = cache[key].componentInstance
  109.         // make current key freshest
  110.         remove(keys, key)
  111.         keys.push(key)
  112.       } else {
  113.         cache[key] = vnode
  114.         keys.push(key)
  115.         // prune oldest entry
  116.         if (this.max && keys.length > parseInt(this.max)) {
  117.           pruneCacheEntry(cache, keys[0], keys, this._vnode)
  118.         }
  119.       }
  121.       vnode.data.keepAlive = true
  122.     }
  123.     return vnode || (slot && slot[0])
  124.   }
  125. }

参考文档：