keep-alive

keeo-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
注：匹配的是组件的name

匹配首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称。匿名组件不能被匹配。

逗号分隔字符串

//中间不能有空格，否则无效
<keep-alive include="Read,Study,Document">
  <router-view></router-view>
</keep-alive>

正则表达式（v-bind）

<keep-alive :include="/Read|Study/">
  <router-view></router-view>
</keep-alive>

数组（v-bind）

<keep-alive :include="['Read', 'Study', 'Document']">
  <router-view></router-view>
</keep-alive>

可以看到，以上数组里的三个组件都会被缓存起来，重新访问相应路由时组件不会被重新渲染。

另外，可以通过在路由中对meta的配置来实现是否使用缓存：

//from router/index.js
{
  path: '/document',
  name: 'Document',
  component: document,
  meta: {
    noCache: true
  }
},
{
  path: '/study',
  name: 'Study',
  component: study
},
	  
//from App.vue
<keep-alive :include="cachedViews">
  <router-view></router-view>
</keep-alive>

if(this.$route.meta && this.$route.meta.noCache){
  this.cachedViews.push(this.$route.name)
}

document页会被缓存起来，study页不会被缓存。

当组件通过keep-alive被缓存起来时，切换组件时可以看到该组件没有执行destroyed等方法，这是因为这个组件的生命周期并没有完成，所以离开当前组件页面时不仅不会触发destroyed等方法，重新进入该页面时也不会再触发created、mounted等生命周期钩子函数。

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

keep-alive无效的问题

情景：keep-alive返回的缓存路由数组正确，可是某页面始终重新渲染，keep-alive似乎失去作用

解决：vue文件的name和路由文件该路由页面的name保持一致