vue 中添加全局轮询消息刷新

最新推荐文章于 2024-09-07 18:41:27 发布

leveretz

最新推荐文章于 2024-09-07 18:41:27 发布

阅读量272

点赞数

分类专栏： java 文章标签： vue.js 前端 javascript

原文链接：https://blog.csdn.net/saber_H/article/details/125520834

版权

java 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

文章介绍了在Vue应用中，如何设置全局定时器以每10秒刷新消息提示，确保在页面切换时仍能获取最新消息。当遇到keep-alive导致的轮询失效问题，作者提供了兼容性修改方案，包括在组件激活和停用时分别处理定时器的启动和清除。

摘要由CSDN通过智能技术生成

原文地址：vue 中添加全局轮询消息刷新_六十的团子的博客-CSDN博客_vue消息提示怎么刷新

场景：后台有消息更新，但不会主动推送给前端，需要前端实时刷新，获取最新的消息提示

思路：后台每个页面通常都会有 layout 组件，我这里写在 header.vue 中，只要登录成功，

进入 header 相关页面，就开始执行定时器，退出登录，清除定时器，上代码

但是在使用过程中发现了某些网页会导致不生效，经过排查是 keep-alive 导致的，

所以变更代码进行兼容，代码如下

       // 10秒间隔刷新获取最新消息 2022-06-21
       let messageTimer = setInterval(() => {
           // 业务代码
       }, 10000);

       this.$on('hook:beforeDestroy', () => {
           // 清除定时器
           clearInterval(messageTimer);
           messageTimer = null;
       });

this.$on('hook:activated', () => {
           if (messageTimer === null) {
               // 避免重复开启定时器
               messageTimer = setInterval(() => {
                   // 业务代码
               }, 10000);
           }
       });
       this.$on('hook:deactivated', () => {
           // 清楚定时器
           clearInterval(messageTimer);
           messageTimer = null;
       });