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

原创已于 2022-07-21 11:31:02 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-07-21 11:26:25 首次发布

本文介绍了Vue中内置组件keep-alive的作用，用于避免频繁创建和销毁组件，保持组件状态。通过设置include和exclude属性，可以选择性地缓存组件。同时，当组件被缓存时，会触发activated和deactivated生命周期钩子，方便进行状态管理。

认识keep-alive：

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

 <component :is='view'/>

我们不想这么频繁创建组件和销毁组件，并且保持组件的状态，这时就推荐使用内置组件：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')
	}
}