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

一、小案例


如上图所示，Home组件的状态当进行切换时，是无法进行保存的，也就是说当每一次进行切换时，该组件都会重新销毁，然后重新创建，这样导致效率太低。此时出现keep-alive组件，该组件中当切换时，不会导致组件销毁。

二、keep-alive组件的属性
keep-alive组价属性存在三个,分别为include,exclude,max,下面将详细说一下三个的具体使用。
include:String | RegExp | Array，就是规定组件满足什么条件才可以进行缓存。
exclude:String | RegExp | Array，就是规定满足什么条件的组件不能缓存。
max: number,表示最多可以缓存多少组件， 如果达到最大值，则最近没有使用的组件剔除。

三、生命周期函数
在使用keep-alive进行切换的时候，我们可以使用activated和disactivated进行监测。
在没有使用keep-alive切换的时候，我们可以使用created和unmounted进行监测。