Vue中使用定时器setInterval和setTimeout
js中定时器有两种，一个是循环执行setInterval，另一个是定时执行setTimeout

一、循环执行（setInterval）

循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉

用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

<template>
</template>

<script>
  export default {
    data() {
      return {
        timer: '',
        value: 0
      };
    },
    methods: {
      get() {
        this.value ++;
        console.log(this.value);
      }
    },
    mounted() {
      this.timer = setInterval(this.get, 1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  };
</script>

二、定时执行 （setTimeout）

定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行

用法是setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

<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 = setTimeout(this.get, 1000);
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  };
</script>

三、 模拟短信验证码发送：

<template>
    <div id="login">
        <div class="sendMessage">  
            <div class="input">
                <el-input  v-model="input.phoneNum" placeholder="请输入手机号" :autosize="autosize"></el-input>
            </div>
            
            <div class="buttonComponent">
                <el-button round  v-on:click="sendMessage"  :disabled="dis"> {{value}} </el-button>
            </div>

            <div class="code">
                <el-input  v-model="input.code" placeholder="请输入验证码" ></el-input>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            value: "点击发送短信",
            dis: false,
            input: {
                phoneNum:'',
                code:''
            },
            autosize: true
        }
    },methods:{
        sendMessage(){
            this.value = 10;
            this.timer = setInterval(this.start, 1000); //发送短信，开启定时,每隔一秒执行一次start()
            this.dis = true;                            //按钮不可用
            this.$message('发送成功');    
        },
        start(){
            this.value--;
            console.log(this.value);
            if(this.value <= 0){
                clearInterval(this.timer); //停止
                this.value = "重新发送短信";
                this.dis = false;   
            }
        }
    },
    mounted(){
        //初始化
    },
    beforeDestroy(){
        //页面关闭时，也要销毁定时器
        clearInterval(this.timer); 
    }
}
</script>