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()
},