keep-alive 概念 原理 使用场景

概念：

keep-alive是vue的内置组件，包裹动态组件时可以缓存不活动的实例，而不是销毁；抽象组件，不会渲染成dom元素，不会展示在页面上。动态组件（让多个组件使用同一个挂载点，动态的进行切换）

原理：

在调用created函数时，会将需要缓存的VNode保存在this.cache中，在Render时如果VNode的name符合缓存条件，就从cache中直接取出进行渲染。

使用场景：

组件切换的时候，如果需要保存当前组件的状态与数据，再次回来后不重新渲染，减少加载时间，提高性能，就可以使用keep-alive。

生命周期：

activated：keep-alive在这里被激活（每次进入组件，都会调用这个钩子）

deactivated：这里停止调用keep-alive（退出缓存组件时，调用这个钩子）

如果每次进入组件还需要重新加载数据，可以在activated中调用获取数据的方法，如果只是第一次进入页面需要获取数据，那就只在mounted中调用就可以了。

使用方法：

（1）全部缓存

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

（2）根据router缓存页面

在路由里面给需要缓存的路由添加属性
meta:{
    keepAlive: true/false
}

在vue组件中添加判断
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

（3）根据条件缓存页面

//缓存name为test的组件，max设置最大缓存数量
<keep-alive include='test'>
    <component></component>
</keep-alive>

//缓存a或者b组件
<keep-alive include='a,b'>
    <router-view/>
</keep-alive>

//使用正则，需要用bind
<keep-alive :include='/a|b/'>
    <router-view/>
</keep-alive>

//动态判断
<keep-alive :include='isComponentsAlive'>
    <router-view/>
</keep-alive>

//不缓存name为test2的组件
<keep-alive exclude='test2'>
    <router-view/>
</keep-alive>

借鉴文章：https://blog.csdn.net/CJamenc/article/details/109842575