vue中keep-alive的使用

在vue2.1.0版本后，keep-alive新加入了两个属性：include（包含的组件缓存生效）与exclude（排除的组件不缓存，优先级大于include）。

include和exclude属性允许组件有条件的缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。（当使用正则或者是数组时，一定要使用v-bind）

<!-- 逗号分隔字符串，只有组件a与b被缓存。这样使用场景变得更有意义了 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

有了include之后，再与router-view一起使用时便方便了许多了：

<!-- 一个include解决了，不需要多写一个标签，也不需要在路由元中添加keepAlive了 -->
<keep-alive include='a'>
    <router-view></router-view>
</keeo-alive>

需要注意的地方：

1、<keep-alive>先匹配被包含组件的name字段，如果name不可用，则匹配当前组件components配置中的注册名称。

2、<keep-alive>不会在函数式组件中正常工作，因为他们没有缓存实例。

3、当匹配条件同时在include与exclude存在时，以exclude优先级最高

4、包含在<keep-alive>中，但符合exclude，不会调用activated和deactivated。