vue2.x项目中使用$once清除定时器，理解$once

本文已参与【新人创作礼】活动，一起开启掘金创作之路。

一、$once的概述使用

1. $once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。
2. $once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的回调函数。
3. $once可以多次为同一个事件绑定多个回调，触发时，回调函数按照绑定顺序依次执行。
4. 还可以作为修饰符使用

1.$once的简单使用+绑定多个回调

<template>
  <div>
    <button @click="$emit('clickHander')">按钮</button>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.$once('clickHander', () => {
      console.log('第一次：该事件只能够被触发一次，触发后立刻被移除');
    });
    this.$once('clickHander', () => {
      console.log('第二次：该事件只能够被触发一次，触发后立刻被移除');
    });
  }
}
</script>

使用方法就是如下, 他们配合使用，可以重复写多个

@click="$emit('clickHander')"

this.$once('clickHander',()=>{})
this.$once('clickHander',()=>{})

2.once作为修饰符

<template>
  <div>
    <button @click.once="clickHander">按钮</button>
  </div>
</template>
 
<script>
export default {
  methods:{
    clickHander(){
      //同样也会触发一次哈
      console.log("XXXX")
    }
  },
}
</script>

// clickHander事件只会被触发一次.

二、使用$once清除定时器（方案二）

方案一：

.以外在没接触$once前我是在data里定义个全局的定时器名字，在方法（methods）或者页面初始化（mounted()）的时候使用定时器，在页面销毁的生命周期函数（beforeDestroy()）中销毁定时器，具体使用如下：

1.在data里定义

export default{
  data(){
    timer:null  
  }
}

2.在方法（methods）的时候使用定时器

 methods: {
	setTimeData() {
		this.timer = setInterval(()=>{
		  // to do
		},1000);
	}
}

3.然后在页面销毁的生命周期函数（beforeDestroy()）中销毁

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

这是最基本的清除定时器的方法，但是创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护。所以才看到可以使用$once方案更优雅的解决。

方案二：

export default{
  methods:{
    setTimeData(){
      let timer = setInterval(()=>{
      	// to do
         console.log("定时器打印111");
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}

在任意地方用 this.$on/$once('hook:生命周期'，callback),就可以监听到生命周期的变化了 这样使用和清除就写在一起，不用定义多余的变量，感觉代码更优雅了。