Vue中组件缓存_＜keep-alive＞标签的使用

Vue中组件缓存_标签的使用

1. 标签的相关说明

实现效果：
需要保留上一次Tab 页的功能[即切换回来页面数据还在]
如下图，当选择 B 组件时，希望从首页切换到设置页时，
还会停留在 B 组件，且B组件的input框输入数据仍在，
而不是重新渲染为默认的 A 组件

注意：
	keep-alive 包裹「动态组件」时，
	会缓存不活动的组件实例，而不是销毁它们。
	它是一个抽象的组件，它自身不会渲染成一个 DOM 元素，
	也不会出现在父组件链中。
	
	它只有在包含动态组件时，才会产生效果。
	如果不是动态组件则会无效。
		比如下面这种用法是没有效果的。
<keep-alive>
  <my-component></my-component>
</keep-alive>	

2. 三种常用方式

1. 不加属性include或exclude控制的话，则标签内渲染的所有组件都缓存
2. 另外需要注意，keep-alive 只能用在只有一个子组件的情况。
如果在其中有 v-for 则不会产生效果

2-1 使用内置组件

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

2-2 出现条件判断时的子组件

<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>

2-3 结合路由组件使用

 <keep-alive>
   <router-view></router-view>
 </keep-alive>

3. 标签的属性

3-1 include：名称匹配的组件才会被缓存

// 可以用
//		逗号分隔字符串、正则表达式、一个数组
//	来限定要缓存的组件，其中a和b为要缓存的组件name值
<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>

//	路由实例：仅缓存路由组件system 
//		注意： 这个system为组件的name值
<keep-alive include="system">
  <router-view></router-view>
</keep-alive>

3-2 exclude：名称匹配的组件不会被缓存

类似include属性，效果相反