2021年vue 中定时器的使用正确方法

2021年vue 中定时器的使用正确方法

在vue中使用定时器，很多情况下，进入和退出vue界面，都没有清除定时器，从而导致有很多定时器一起工作，这样肯定是不行的，接下来就使用当用户进入界面时启用定时器，当用户离开当前界面时就清除定时器。

<template>
</template><script>import store from '@/store'import Vue from 'vue'export default {name: "test",data () {return {timer: null}},methods: {setTimer() {if(this.timer == null) {this.timer = setInterval( () => {console.log('开始定时...每过一秒执行一次')}, 1000)}}},created: function() {FamilyBase_info()// 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器clearInterval(this.timer)this.timer = nullthis.setTimer()},destroyed: function () {// 每次离开当前界面时，清除定时器clearInterval(this.timer)this.timer = null}}
</script>
<style scoped>
</style>