Vue缓存组件或页面实用技巧 - keepAlive销毁

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue缓存组件或页面实用技巧 - keepAlive销毁相关的知识,希望对你有一定的参考价值。

假设在一个列表中,用户滑动几页点击了详情,此时若再回到列表页,页面状态都已经刷新,用户又需要再进行滑动,这显然是不合理的。

在PC端我们有很多天然优势可以处理这类问题,比如使用分页器让列表不要过长,比如打开详情跳转个新标签页,又或者将详情页面做成抽屉,做成遮罩弹窗等等。。但是在移动端开发中,我们无法避免这个问题,所以有时候就必须记录下页面的状态,让用户在返回时保持页面原有的样子。

在Vue中,我们可以很方便的使用​​keep-alive​​来缓存页面,通常情况下,我们可以通过如下方式改写路由视图:

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

如上使用了两个if判断,不然会不生效

<!-- 错误写法: -->
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>

然后我们在需要缓存的页面路由处设置meta即可:


path: "/activityList",
name: "activityList",
title: "活动列表",
meta: keepAlive: true ,
component: () => import("@/pages/activity/list.vue")

这种就是最常用的方式,在使用了keepAlive之后的页面,生命周期会发生一些变化,比如create和mounted这种页面初始化相关的钩子只会执行一次,因为页面的状态已经不会自动改变了,同时有两个额外的生命周期钩子会生效,分别是:

activated() 
// 页面重回
,
deactivated()
// 页面离开

除此之外使用了keepAlive还有一个副作用,我们会发现页面无法卸载了,也就是销毁的生命周期不再触发了,而且当用户离开列表页,转而又进入列表页的时候,列表页应该是初始化状态而不是缓存状态等情况,这些都使得业务逻辑代码变得繁杂。

为了解决以上的问题,我们采用Vue提供的​​include​​方式来替代if判断

"keepPages">
<router-view></router-view>

并且结合Vuex来管理状态

computed: 
keepPages()
return this.$store.getters.getKeepPages

mutation代码:

changeKeepPages(state, status) 
state.keepPages = status;
,
keepThisPage(state, status)
const arr = state.keepPages.split(",");
arr.push(status);
state.keepPages = arr + "";
,
removeThisPage(state, status)
const arr = state.keepPages.split(",");
const index = arr.findIndex(x x === status);
if (index > 0)
arr.splice(index, 1);

state.keepPages = arr + "";

然后又写了一份mixin,混入即可将该页面/组件设置为缓存状态:

export default 
created()
if (!this.$options.name) // 这里的name是页面/组件对象中的name,不是路由的
console.warn("缓存页面失败!没有设置组件名!");

this.$store.commit("keepThisPage", this.$options.name);
,
beforeDestroy()
console.log("触发组件销毁")

;

销毁页面可以主动使用:

this.$store.commit(removeKeepPages, xxx) // xxx为要销毁的页面名称

也可以清空所有缓存的页面,比如在用户回到首页的时候触发:

this.$store.commit(changeKeepPages, index) // index这个地方没有实际意义,经测试include为空值时所有页面都会缓存,所以这里才设置了一个不存在的。

我这里使用了下面的方式,在回到首页时顺利触发了前一个列表页的销毁事件,这样整个流程就变得十分舒适了,也在一定程度上避免了内存泄漏。以上就是Vue中keepAlive的实用技巧,希望对你有所帮助。

以上是关于Vue缓存组件或页面实用技巧 - keepAlive销毁的主要内容,如果未能解决你的问题,请参考以下文章

Vue JS 组件重新附加或缓存

vue keepalived 怎么刷新

Vue组件传值及页面缓存问题

Vue教程(四十六)keep-alive快速实现页面缓存

Vue教程(四十六)keep-alive快速实现页面缓存

vue中tab标签页keep-alive二级路由+删除指定缓存页面