keep-alive
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。
官网解释:
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染
应用场景
如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:
- 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
- 订单列表跳转到订单详情,返回,等等场景。
keep-alive的生命周期
- 初次进入时:created > mounted > activated;退出后触发 deactivated
- 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中
项目实践
1.更改App.vue
2.在路由中设置keepAlive
{
path: 'list',
name: 'itemList', // 商品管理
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '商品管理'
}
}
3.更改 beforeEach钩子
这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存:
- 若第一次进入A页面后退出,再次进入页面时,页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回,页面保持不变,而不是退出后重新进入保持不变。
- 在进入过A页面后进入B页面,经过测试后发现,B页面竟然会显示A页面的缓存,尽管url已经改变
为了解决这个问题,需要判断页面是在前进还是后退。 在beforeEach钩子添加代码:
let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
console.log('back...')
from.meta.keepAlive = false
to.meta.keepAlive = true
}
记录页面滚动位置
keep-alive并不会记录页面的滚动位置,所以我们在跳转时需要记录当前的滚动位置,在触发activated钩子时重新定位到原有位置。 具体设计思路:
- 在deactivated钩子中记录当前滚动位置,使用localStorage:
deactivated () {
window.localStorage.setItem(this.key, JSON.stringify({
listScrollTop: this.scrollTop
}))
}
- 在activated钩子中滚动:
this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)
欢迎在下方留言讨论,小郭将与你一起成长,想看更多内容可关注同名公众号“一郭鲜”
推荐阅读:四川焦点网
-
朱一龙推泡沫道具,嘟嘴呼气差点累趴下,演技了
又被成熟男人朱一龙可爱到了怎么办?拍个广告都浑身是戏,这是把表演融入了自己的生活吗?推道具嘟嘴呼气差点累趴下,可爱模样骗过了所有网友的眼睛,结果真相来得太猝不及...
2020-01-14 -
任嘉伦忙着送礼物,不忘抽空偷瞄谭松韵,看到他
说到任嘉伦和谭松韵,我们都非常的熟悉啦,这两位如今可是又要大火一阵子了,他们的《锦衣之下》如今才更新到18集,就已经被人各种夸,连小编也跟着看的很起劲儿,整天就...
2020-01-14 -
肖战主演玛丽苏神剧《哦我的皇帝陛下》,肖战倒
今天本逗要和大家一起看一部玛丽苏沙雕神剧《哦我的皇帝陛下》,这是一个追星少女在墙头和本命中反复横跳的故事,又名《霸道爱豆爱上我》。故事一开始,我们的女主菲菲就在...
2020-01-14 -
美剧拍《西游记》,若第一季遭腰斩,如此结局!
如果《西游记》是一部美剧,第一季就因故遭腰斩,编剧会如何结尾?可能的结局:1孙悟空在下界造反,天兵天将难以取胜,最后太上老君实在咽不这口恶气,主动请缨到花果山降...
2020-01-14 -
陈情令后又一部双男主剧《天官赐福》要来了!原
近几年来,小说改编成的电视剧也来越多,而且电视剧收视率也都好不错。今年大火的《陈情令》就是有小说《魔道祖师》改编的,现在说起陈情令,相信大部分的人就算没看过也都...
2020-01-14 -
贤菲发糖,娄艺潇一颦一笑还是熟悉的味道
当刷到#胡一菲曾小贤领证#这个热搜时,我知道又一个充满回忆的代表作品即将离我们而去。《爱情公寓》是不少80、90后的青春回忆,看起来南辕北辙的人物在公寓中聚在一...
2020-01-14