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

原文地址：https://blog.csdn.net/saber_H/article/details/125520834

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

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

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

// 10秒间隔刷新获取最新消息 2022-06-21

let messageTimer = setInterval(() => {

// 业务代码

}, 10000);

this.$on('hook:beforeDestroy', () => {

// 清除定时器

clearInterval(messageTimer);

messageTimer = null;

});

在 mounted 中编写代码，采用 hook 写法，在同一个地方编写，逻辑较为清晰，

但是在使用过程中发现了某些网页会导致不生效，经过排查是 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;

});