Vue <keep-alive> 实现页面缓存

举报
SHQ5785 发表于 2023/03/08 08:49:22 2023/03/08
【摘要】 一、引入场景有时候我们不希望组件被重复渲染影响用户使用体验;或出于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以应用keep-alive组件。官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素...

一、引入场景

有时候我们不希望组件被重复渲染影响用户使用体验;或出于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以应用keep-alive组件。

官网解释:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activateddeactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activateddeactivated 将会在 <keep-alive> 组件内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染。

二、应用场景

如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,用户体验不好。 在菜单存在多级关系,多见于列表页+详情页的场景,使用keep-alive组件会显著提高用户体验,如:商品列表页点击商品跳转到商品详情,返回后仍显示原有信息,订单列表跳转到订单详情,返回,等等场景。

三、keep-alive 生命周期

  • 初次进入时:created > mounted > activated;退出后触发 deactivated;
  • 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中;

四、项目实践

1.更改App.vue

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

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)
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。