vue内置组件keep-alive怎么使用寻技术

这篇文章主要讲解了“vue内置组件keep-alive怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue内置组件keep-alive怎么使用”吧！

一、Keep-alive 是什么

keep-alive

是

vue

中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染

DOM

。

keep-alive

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive

可以设置以下

props

属性：

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

关于

keep-alive

的基本用法：

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

使用

includes

和

exclude

：

<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>

匹配首先检查组件自身的