Vue3语法-keep-alive(内置缓存组件)

认识keep-alive：

1. 我们想频繁切换组件中component标签，组件会被频繁的创建和销毁。

 <component :is='view'/>

2. 我们不想这么频繁创建组件和销毁组件，并且保持组件的状态，这时就推荐使用内置组件：keep-alive

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

keep-alive属性

• include - string | RegExp(正则) | Array。只有名称匹配组件会被缓存
• exclude - string | RegExp(正则) | Array。任何名称匹配的组件都不会被缓存
• max - string | number。最多可以缓存多少组件实例，一旦达到这个数字，那么组件中醉经没有被访问的实例会被销毁；（很长时间每被访问的组件实例会被销毁）

<!-- 逗号分隔字符串 没有空格间隔 -->
<keep-alive include='a,b'>
	<component :is='view'/>
</keep-alive>

<!-- RegExp(正则) 使用‘v-bind’  -->
<keep-alive :include='/a|b/'>
	<component :is='view'/>
</keep-alive>

<!-- Array 使用‘v-bind’  -->
<keep-alive :include="['a','b']">
	<component :is='view'/>
</keep-alive>

(注意：名称匹配的组件自身的name选项)

export default{
	name:'view'
}

缓存组件的生命周期

想要监听切换组件推荐使用activated和deactivated

• activated：组件活跃时触发
• deactivated：组件不活跃触发

export default{
	activated(){
		console.log('activated')
	},
	deactivated(){
		console.log('deactivated')
	}
}