vue里使用keep-alive缓存页面以及使用了定时器setInterval的坑

最新推荐文章于 2024-01-11 17:23:12 发布

寒风未停

最新推荐文章于 2024-01-11 17:23:12 发布

阅读量1.9k

点赞数 1

分类专栏： vue 文章标签： vue 缓存 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43778491/article/details/108193744

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何利用keep-alive组件正确缓存表单数据，以及如何在使用定时器时避免常见陷阱。通过全局前置守卫beforeRouteEnter和生命周期钩子activated、deactivated，确保了页面状态的正确管理和资源的有效释放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一个写前端的踩坑问题。
通常我们想要返回上一个页面的时候，缓存上一个页面的数据时，在vue中就提供了个好用的功能，把想要的缓存的地方加上keep-alive
如下:一般来说会缓存表单的数据。

<keep-alive>
            <Form ref="forms" :model="formItem" :label-width="100">
  			......
            </Form>
</keep-alive>

单单这个是不太满足我们的功能的。因为这样的话，不管我们从哪个页面进入这里，数据都会被缓存。要求是在详情页或者某几个页面回来的时候缓存，这时候就要增加点东西了。
此处介绍个vue的全局前置守卫beforeRouteEnter
官方讲解: beforeRouteEnter官方讲解
在router的index.vue 中添加个路由参数

devRouter = [{
        path: '/',
        name: 'home',
        component: Home,
        meta: {
            keepAlive: true,
            isBack: false
        }
    }
   ]

在home.vue中添加下面两个钩子

beforeRouteEnter(to, from, next) {
            if (from.path == '/detail') {
                to.meta.isBack = true;
            } else {
                to.meta.isBack = false;
            }
            next();
        },
activated() {
            let _this = this
            if (!this.$route.meta.isBack) {
                this.formItem = {
                }
                ...
            }
            this.$route.meta.isBack = false;
        }

当进入该页面的时候会先到beforeRouteEnter()函数里，判断是从哪个页面来的进行设置路由里的参数，然后执行activated()钩子。如果不是从详情页来的话，就需要手动去重置页面缓存的参数为空。这样就可以解决了。
第二个文件使用定时器这个简单。大都使用是这样
在mounted里挂载个启动函数,然后使用下退出时的钩子如：

//定时器加载
Initdate() {
       this.timer = setInterval(func, 300 * 1000)
}

destroyed() {
      clearTimeout(this.timer)
}

正常使用没啥，此处但是里面要是使用了keep-alive就有个大坑了。除了初始化进入home页面时会执行mounted()里面的方法，从其他页面跳进来的时候，不再执行了。也就是说在mounted里挂载的方法不执行了。
同样，destroyed()钩子也是一样不再执行了。
这里就需要用到deactivated()和activated()钩子了。
常规思维如下:

activated() {
            if (!this.$route.meta.isBack) {
                .......
            }
            this.$route.meta.isBack = false;
            this.Initdate()//定时器函数
        },
deactivated() {
            clearTimeout(this.timer)
        },

在开发阶段记得先清掉之前的缓存，不然会会残留之前的定时器未结束