Vue使用hook销毁定时器

最新推荐文章于 2024-08-20 09:06:35 发布

原创最新推荐文章于 2024-08-20 09:06:35 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

JavaScript

29 篇文章

订阅专栏

vue.js

15 篇文章

订阅专栏

本文介绍了一种在Vue中更优雅地管理定时器的方法。通过使用$once('hook:beforeDestroy')来确保定时器在组件销毁前能够被及时清除，避免内存泄漏等问题。这种方法将定时器的创建与销毁放在同一个地方，减少了遗漏的风险。

	mounted() {
	  // 创建一个定时器
	    this.timer = setInterval(() => {
	      // ......
	    }, 500);
	  },
	  // 销毁这个定时器。
	  beforeDestroy() {
	    if (this.timer) {
	      clearInterval(this.timer);
	      this.timer = null;
	    }
	  }
上面是我们经常使用的创建定时器,在页面被销毁之前清空定时器;但是因为不再一个地方,可能会有遗忘,而忘记去清理定时器;
使用hook可以帮我们轻松解决定时器清除问题
	mounted() {
		let timer = setInterval(() => {
			// ......
		}, 500);
		this.$once('hook:beforeDestroy', function() {
			if (timer) {
				clearInterval(timer);
				timer = null;
			}
		});
	}