keep-alive (本人理解为缓存组件)

参数 (官方定义)

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

理解 (本人理解)

当我们在一个页面中去切换不同的功能或是页面时，而此时这个功能或子页面被封装成了一个子组件。那我们进行的操作将会去销毁上一个子组件这样的行为会有极大功耗，不利于之后的维护。所以此时 keep-alive的出现就巧好的解决了这个问题。keep-alive的工作原理就是去缓存名称匹配的组件。

用法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

它有两个生命周期

activated: keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

代码解析

// 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 => matched(val, name))
   })
   this.$watch('exclude', val => {
       pruneCache(this, name => !matches(val, name))
   })
 },

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

注意了啊!!!

<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

加油

你能看到这里已经很棒了，我能帮你的就到这了。一个优秀的程序员需要不断的努力来累计自己的代码量和知识储备。加油吧！！！顶峰相见。

浅谈vue的keep-alive