Vue2中 keep-alive 使用，如何清除 keep-alive 缓冲的组件

一、< keep-alive >

< keep-alive > 用来缓冲插槽中的内容（缓冲后不会重新渲染），就是 < keep-alive >……< / keep-alive>标签包裹的内容，里面只允许一个根标签，多个根标签只缓冲第一个标签，如：

<keep-alive>
	<div>root1</div>
	<p>root2</p>
	……
</keep-alive>

上面有多个根节点情况，< keep-alive > 只会缓冲第一个根节点。< keep-alive > 自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当在 < keep-alive >中切换缓冲过的组件时，会触发 activated 和 deactivated 这两个生命周期钩子函数。

注：<keep-alive>常包裹路由视图<router-view>或动态组件<component :is="">来使用

二、清除 < keep-alive > 缓冲的组件

清除缓冲有两种方案：1. 使用 < keep-alive > 标签提供的 include、exclude 属性；2. 操作 < keep-alive > 组件内部的缓冲数据 cache, keys

清除缓冲的场景：打开多个子页面，每个子页面切换时，保留每个子页面状态（缓冲），手动关闭后（清除缓冲），重新打开要新加载。如下图场景：

1. include, exclude, max
   include：控制哪些组件能够缓冲，在其匹配值内的组件才能缓冲。
   exclude：控制哪些组件不能够缓冲，在其匹配值内的组件不能缓冲。
   include 和 exclude 可单独使用，也可同时使用，若同时使用有相同值时，则该组件不会被缓冲，因为 exclude 优先级高于 include。
   max：最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
   include 和 exclude 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，无论哪种形式数据，其值都是针对组件名称，就是给组件命名的 name 值，也就是说使用这两个属性控制组件是否缓冲，组件必须要命名。常用数组作为这两个属性值，数组元素就是命名的组件名称。这两个属性使用实例：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>