实现缓存
- 在路由文件router.js中针对要缓存的页面进行设置
添加keepAlive: true,通过此字段判断是否需要缓存当前组件
{
path: '/club',
name: 'Club',
component: Club,
meta: {
title: 'Club',
keepAlive: true
}
},
- 在app.vue文件中添加 :
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
$route.meta.keepAlive表示在1中配置缓存的页面进行缓存
实现缓存页面局部的数据更改
这样基本的功能已经实现了,但是还是不能满足我们的需求
这样的界面缓存是对全部数据的缓存,相当于再次跳转这个界面是不进行任何钩子函数的操作,但是我们的需求是,这个界面中的部分数据要动态更新,返回这个页面时本页面数据缓存且还是页面之前的滚动位置
使用
在club界面(就是使用缓存的界面,添加这样的钩子函数,实现对当前界面的更新)
activated(){
this.active = 1
this.num = 1
},
解析:
官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染
场景
如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子。
在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:
- 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
- 订单列表跳转到订单详情,返回,等等场景。
keep-alive的生命周期
- 初次进入时:created > mounted > activated;退出后触发 deactivated
- 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中
所以通过官网提供的钩子函数activated,我们可以对已缓存的界面进行动态的局部的更新操作