Vue定时器setInterval的使用和清除
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue定时器setInterval的使用和清除相关的知识,希望对你有一定的参考价值。
参考技术AVue定时器setInterval的使用和清除
1、data中定义定时器
2、使用定时器1 * 1000代表1s,1 60 1000==minute
3、清除定时器,防止循环引用
Vue中在组件销毁时清除定时器(setInterval)
在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器
<template>
<div class="about">
</div>
</template>
<script>
export default {
name: "about",
data() {
return {
//接收定时器
timer: ""
};
},
mounted() {
let _this = this;
let num = 0;
//创建并执行定时器
this.timer = setInterval(() => {
//当num等于100时清除定时器
if (num == 100) {
clearInterval(_this.timer);
}
console.log(num++);
}, 1000);
},
beforeDestroy() {
//清除定时器
clearInterval(this.timer);
console.log("beforeDestroy");
},
destroyed() {
//清除定时器
//clearInterval(this.timer);
console.log("destroyed");
}
};
</script>
<style scoped>
</style>