el-badge上角标数据+定时器刷新数据

背景

在任务图标左上方显示总任务任务进度

需求分析

图标+标记+获取进度接口+实时更新数据

解决方案

使用element-ui的组件

1. 图标el-icon
   参考文档： https://element.eleme.cn/#/zh-CN/component/icon
2. 左上角提示el-badge
   参考文档： https://cloud.tencent.com/developer/section/1489890
3. 获取任务进度并且实时刷新进度==》定时器
   （定时器很消耗性能，暂未学习到其他方法，后续补充）

案例

尝试1：绘制UI，用假数据

效果

案例二，连上接口，定时刷新数据，获取最新任务进度

尝试2，定时器刷新

添加定时器

  mounted () {
    // 定时刷新任务进度
     this.timer = setInterval(this.getRunningTask, 1000);
  },
  beforeDestroy(){
    // 清楚定时器
     clearTimeout(this.timer);
  },

完整代码：

尝试3，加入监听，优化定时器使用

参考文档：https://blog.csdn.net/qq_37210523/article/details/103121237

js有两种定时器

setInterval(function(){}, milliseconds)——会不停的调用函数

setTimeout(function(){}, milliseconds)——只执行函数一次

setInterval会符合实时刷新的需求，但是单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。

优化方案
监听器

 watch: {
    //定时器优化方案
    // progressData是要监听的数据
    progressData: function() {
      const timer = setInterval(() => {
        // 某些定时器操作
        this.getRunningTask();
      }, 500);
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
      });
    }
  }

完整