标签：Vue 简介 用法 缓存 组件 exclude include 属性

<KeepAlive>

@说明：缓存被包裹的组件

先看段动态绑定组件代码：

<component :is="activeComponent"></component>

在上例代码中，随着组件的动态切换，旧的组件会被删除，新的组件会被新建。

这样带来一个问题，比如旧组件是一个表单，上面有我之前选择选项及录入的内容。如果我切回旧组件时，之前的录入将丢失。

所以<KeepAlive>组件能解决这个问题，它会在切换组件时，缓存旧组件。代码如下：

<KeepAlive>
    <component :is="activeComponent"></component>
</KeepAlive>

 

一、当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用

 

二、<KeepAlive> 组件属性：

<KeepAlive include = "" exclude = "" max = ""></KeepAlive>

 

 include 属性:

@说明:  [可选] 默认会缓存内部的所有组件实例，include可以指定要缓存的组件

用法一：用逗号分隔的字符串

<!-- 指定组件a，b被缓存 -->
<KeepAlive include="a,b">
  <component :is="view"></component>
</KeepAlive>

 

用法二：正则表达式

<!-- 指明组件 a和b被缓存 -->
<KeepAlive :include="/a|b/">
  <component :is="view"></component>
</KeepAlive>

 

用法三：数组

<!-- 指明组件 a和b被缓存 -->
<KeepAlive :include="['a', 'b']">
  <component :is="view"></component>
</KeepAlive>

 

 

exclude 属性：

@说明:  [可选] 指定的组件不会被缓存，它用法和include相同

 

 

max属性：

@说明: [可选] 最大缓存实例数

<KeepAlive :max="10">
  <component :is="view"></component>
</KeepAlive>

 

标签：Vue,简介,用法,缓存,组件,exclude,include,属性
From： https://www.cnblogs.com/wm218/p/16707536.html