vue 使用定时器setInterval，且解决不起作用


在网上看到一篇Vue中使用定时器setInterval和setTimeou讲解得很好，但是放在自己代码中却不能实现定时器的作用，后来了解到是因为vue中要用箭头函数才能使setInterval起作用

解决方案

1
  this.timer = setInterval(this.get, 1000);

修改为

1
2
3
4
5
      var _this = this;  //注意，要有，因为有箭头函数所以this作用域不在是vue，而是定时器。我们要调用的是vue中的函数
      this.timer = setInterval(() => {
           _this.get();
    }, 3000);
    },

完整代码（建议细看代码注释）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <section>
    <h1>hello world~</h1>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
     
      //这行代码是不起用的，错误的 this.timer = setInterval(this.get, 1000);  
     
      //以下才正确
      var _this = this;  //注意，要有，因为有箭头函数所以this作用域不在是vue，而定时器。我们要调用的是vue中的函数
      this.timer = setInterval(() => {
           _this.get();
    }, 3000);
    },

    //注意，必须在页面销毁前关闭定时器，否则定时器会一直存在，一直进行操作，以前就遇到定时器没清除，造成浏览器内存溢出,内存占到89%，找了很久才找到原因
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>