VUE框架深入——掌握keep-alive缓存加载慢，请求多的页面

一、keep-alive是什么？

keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,简单一点来说就是从页面链接到其他页面后回退到页面不用在重新执行页面的代码,只会从缓存中加载之前已经缓存的页面,这样可以减少加载时间及性能消耗,提高用户体验性。

二、使用步骤

1.在动态组件中的应用

代码如下（示例）：

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

2.在vue-router中的应用

代码如下（示例）：

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>

3.刷新keep-alive缓存的页面

搭配使用activated()

activated(){}

或者使用路由守卫，使用组件的路由

beforeRouteEnter(to, from, next) {
    next((vm) => {
    })
  },

总结

good night