原方案-缺点

  • 它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。

  • 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。 ```javascript data() {
    return { 

    1.   timer: null  // 定时器名称

    }
    },

    this.timer = setInterval(() => { // 某些操作 }, 1000)

beforeDestroy() { clearInterval(this.timer);
this.timer = null; }

  2. <a name="YfSoT"></a>
  3. ### 优化
  4. 该方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器
  5. ```javascript
  6.   export default {
  7.     mounted() {
  8.       const timer = setInterval(() => { ... }, 1000);
  9.       this.$once('hook:beforeDestroy', () => clearInterval(timer);)
  10.     }
  11.   };

应用场景

请求轮询

  1. timeRecorder() {
  2.         let t = null;
  3.         let that = this;
  4.         t = setTimeout(time, 1000); //開始运行
  5.         function time() {
  6.           clearTimeout(t); //清除定时器
  7.           that.time = moment().format("HH:mm");
  8.           console.log(that.time,'一分钟一刷新')
  9.           t = setTimeout(time, 1000 * 60); //设定定时器，循环运行
  10.         }
  11.         this.$once('hook:beforeDestroy', () => clearTimeout(t))
  12.       }

定时刷新-每日

  1. timeRecorder() {
  2.         let t = null;
  3.         let that = this;
  4.         t = setTimeout(time, 1000); //開始运行
  5.         function time() {
  6.           clearTimeout(t); //清除定时器
  7.           that.time = moment().format("HH:mm:ss");
  8.           // console.log(moment().format("HH:mm:ss"),'一秒一刷新， 24点重新请求')
  9.           if (that.time === '24:00:00') {
  10.             that.fetchList()
  11.           }
  12.           t = setTimeout(time, 1000); //设定定时器，循环运行
  13.         }
  14.         this.$once('hook:beforeDestroy', () => clearTimeout(t))
  15.       },