vue组件化开发——keep-alive组件

阅读 78

2022-02-10

一、小案例
在这里插入图片描述
在这里插入图片描述
如上图所示,Home组件的状态当进行切换时,是无法进行保存的,也就是说当每一次进行切换时,该组件都会重新销毁,然后重新创建,这样导致效率太低。此时出现keep-alive组件,该组件中当切换时,不会导致组件销毁。
在这里插入图片描述
二、keep-alive组件的属性
keep-alive组价属性存在三个,分别为include,exclude,max,下面将详细说一下三个的具体使用。
include:String | RegExp | Array,就是规定组件满足什么条件才可以进行缓存。
exclude:String | RegExp | Array,就是规定满足什么条件的组件不能缓存。
max: number,表示最多可以缓存多少组件, 如果达到最大值,则最近没有使用的组件剔除。

三、生命周期函数
在使用keep-alive进行切换的时候,我们可以使用activateddisactivated进行监测。
在没有使用keep-alive切换的时候,我们可以使用createdunmounted进行监测。

精彩评论(0)

0 0 举报