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

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

 思路：后台每个页面通常都会有 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;
		});