vue中使用$once清除定时器

发表于 分类于

清理定时器的方法

  在 vue 项目中，通常采用两种方法清理定时器，如下。

方法一：定义 data 中定义 timer

  首先在 vue 实例的data中定义定时器的名称；然后在方法methods或者页面初始化mounted()的时候使用定时器；最后在页面销毁的生命周期函数beforeDestroy()中销毁定时器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default{
  data(){
    timer:null
  },
  mounted(){
      this.timer = setInterval(()=>{
      console.log('123');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

方法二：监听事件 hook:beforeDestroy

  使用this.$once(‘hook:beforeDestory’,()=>{})，直接在需要定时器的方法或者生命周期函数中声明，并销毁。

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
	methods: {
		fn() {
			let timer = setInterval(() => {
				console.log("123");
			}, 1000);
			this.$once("hook:beforeDestroy", () => {
				clearInterval(timer);
				timer = null;
			});
		},
	},
};

总结

  方法一需要定义定时器的实例，相对多余，而且定时器的销毁和创建代码没放一起，容易忘记清除定时器。因此推荐使用方法二。