Vue.js keep-alive组件

发表于 | 分类于 ，

有时候会觉得学习vue像在寻宝一样。因为vue中有很多很有用的组件，像之前写的关于插槽组件的那篇一样，我也是认为插槽组件很有用，可以更好的实现组件复用。这篇主要整理keep-alive组件的内容。

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

keep-alive组件可以使用到动态组件<component>，也可以使用到路由组件<router-view>上：

1
2
3
4
5
6
7
8
9
// 使用到动态组件上
<keep-alive>
  <compunent :is="view"></component>
</keep-alive>

// 使用到路由组件上
<keep-alive>
  <router-view></router-view>
</keep-alive>

keep-alive组件内可以由多个子组件，但是要求只能同时渲染一个子组件，也就是多子组件时，可以使用v-if，v-else，但不支持v-for。

它有三个props：include，exclude，max。

include

include支持组件名匹配字符串或正则表达式的组件被缓存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<keep-alive include="book">
  <!-- 将缓存name为book的组件，name为movie的组件将不会被缓存 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态匹配判断是否缓存 -->
<keep-alive :include="['books', 'movies'] ">
  <router-view></router-view>
</keep-alive>

exclude

exclude跟include刚好相反，组件名不匹配字符串或正则表达式的组件才会被缓存。用法跟include一样。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<keep-alive exclude="book">
  <!-- 除name为book的组件之外其他组件都会被缓存，如name为movie的组件 -->
  <component></component>
</keep-alive>

<keep-alive exclude="a,b">
  <!-- 将不缓存name为a或者b的组件 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :exclude="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态匹配判断是否缓存 -->
<keep-alive :exclude="['books', 'movies'] ">
  <router-view></router-view>
</keep-alive>

max

max表示最多可以缓存多少个组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

1
2
3
4
<!-- 最多只能缓存10个组件实例，而且是最新被访问的组件实例才会被缓存 -->
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>