Vue的keep-alive

keep-alive介绍：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

是一个内置组件。主要用于保留组件状态或避免重新渲染

里面有三个属性：

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

// 基本的使用
<keep-alive>
  <component :is="view"></component>
</keep-alive>

// 多条件判断的子组件
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

// 如果需要使用动画
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

 include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

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

// 正侧表达式（需要使用 v-bind）
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

// 数组（也需要使用 v-bind）
<keep-alive :include="['a','b']">
  <component :is="view"></component>
</keep-alive>

max 是最多可以缓存多少个组件实例。如果数字达到了，在新的实例被创建前，以缓存组件醉酒没有被访问到的实例就会被销毁。（意思就是如果数量达到了，再缓存下一个组件实例，最前面第一个缓存的组件实例就会销毁，以此类推）

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

// 就好比
<keep-alive :max="3">
  <component :is="view"></component>
</keep-alive>
// max 最多缓存3个 ，但是我们有4个组件 ，我们按照顺序：
// 我们把第一个组件的值从 0 改成 1 
// 我们把第二个组件的值从 0 改成 2
// 我们把第三个组件的值从 0 改成 3 后
// 这个时候第一，二，三来回切换，里面的值还是对应的 1 ，2 ，3
// 但是如果我们访问第四的组件 把值从 0 改成 4 的时候
// 因为我们最先缓存的是第一个组件，而且我们最多缓存 3 个组件，
// 这个时候第一个组件的缓存就会被销毁，缓存改成了第 二 ，三 ，四 的组件了，
// 再切换到第一个组件，你就会发现值变成了 0 ，随之就是第二个组件的缓存被销毁，以此类推

// 就是当我们缓存的数字到达后，再进行下一个组件缓存的话，最前面先缓存的组件实例就会被销毁 

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

以上只是个人的理解：

详细请参考：Vue.js (vuejs.org)   Vue的官网