Vue 进阶(幺肆拐):利用 Vue 中 keep-alive 快速实现页面缓存
引入场景
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keep-alive
组件。
官网解释:<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
中
项目实践
1.更改 App.vue
2.在路由中设置keepAlive
3.更改 beforeEach
钩子
这一步是为了清空无用的页面缓存。 假设现在 A、B 两个页面都开启的缓存:
若第一次进入 A 页面后退出,再次进入页面时,页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是 A 页面前进后返回,页面保持不变,而不是退出后重新进入保持不变。
在进入过 A 页面后进入 B 页面,经过测试后发现,B 页面竟然会显示 A 页面的缓存,尽管 url 已经改变。
为了解决这个问题,需要判断页面是在前进还是后退。 在beforeEach
钩子添加代码:
记录页面滚动位置
keep-alive
并不会记录页面的滚动位置,所以我们在跳转时需要记录当前的滚动位置,在触发activated
钩子时重新定位到原有位置。 具体设计思路:
在deactivated
钩子中记录当前滚动位置,使用localStorage
:
在activated
钩子中滚动:
版权声明: 本文为 InfoQ 作者【华强】的原创文章。
原文链接:【http://xie.infoq.cn/article/285e4586b94fcf831740137fd】。文章转载请联系作者。
评论