keep-alive简介 keep-alive如何使用

keep-alive简介

1.什么是keep-alive
keep-alive是vue2.0新增的内置组件，可以用来缓存上个页面的数据，在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态

2.keep-alive的功能
项目主流程缓存优化，主流程页面（组件）切换时保持之前加载的状态，避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力

3.keep-alive的使用场景
场景：A首页、B列表页、C详情页
三个页面：A B C 三个路由
搭配路由守卫经行缓存
路由组件的缓存：
A=>B B=>A ,A组件路由被缓存了
A=>C C=>A ,A组件路由不缓存

4.可以在路由文件中设置meta进行哪些需要缓存哪些不需要缓存

  <!--缓存的视图-->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive">
                    </router-view>
                </keep-alive>
                <!--不缓存的视图-->
                <router-view v-if="!$route.meta.keepAlive">
                </router-view>     

path: '/classify',
    name: 'classify',
    component: () => import('@/views/classify/classify.vue'),
    meta: {
     
      title: '111',
      keepAlive: true
    }
  },

5.vue新增的周期函数以及属性的注意事项include exclude
（1）Vue中提供了一个内置组件keep-alive，使用元素将动态组件包裹起来，内部组件就会被缓存起来。

（2）包裹的组件，加载过的页面，再次进入时，是不会执行页面第一次进入时的部分生命周期函数。

（3）包裹的组件会新增两个生命周期函数activated和deactivated.

两个属性include和exclude可以让实现有条件的进行缓存。include包含的组件会被进行缓存，
exclude包含的组件不会被缓存。

6.使用include、exclude属性和beforeRouteEnter钩子函数
首先介绍一下include和exclude
是在vue2.0以后新增的属性
include是需要缓存的组件；
exclude是除了某些组件都缓存；
include 和 exclude 属性允许组件有条件地缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

beforeRouteEnter钩子函数
局部守卫

beforeRouteEnter(to, from, next) {
       
// To Do
//to: 代表的是你想要进入的路由配置对象
//from: 代表的是你从哪来调过来的
//next: 是否让to进入from  next()
  },