vue定时器实现逻辑

vue定时器实现逻辑

在Vue中实现定时器功能，通常使用setInterval或setTimeout，但需要注意Vue组件的生命周期管理，避免内存泄漏。以下是常见的实现方式：

使用setInterval

export default {
  data() {
    return {
      timer: null,
      count: 0
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.count++
      console.log('定时执行', this.count)
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

使用setTimeout实现循环

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    startTimer() {
      setTimeout(() => {
        this.count++
        this.startTimer()
      }, 1000)
    }
  },
  mounted() {
    this.startTimer()
  }
}

使用Vue的$once和钩子函数

export default {
  mounted() {
    const timer = setInterval(() => {
      console.log('定时任务')
    }, 1000)

    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  }
}

使用Vue3的Composition API

import { onMounted, onUnmounted, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let timer = null

    onMounted(() => {
      timer = setInterval(() => {
        count.value++
      }, 1000)
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    return { count }
  }
}

注意事项

定时器需要在组件销毁时清除，否则会导致内存泄漏。

对于需要暂停和恢复的定时器，可以封装成可控制的形式：

export default {
  data() {
    return {
      timer: null,
      isRunning: false,
      count: 0
    }
  },
  methods: {
    start() {
      if (!this.isRunning) {
        this.isRunning = true
        this.timer = setInterval(() => {
          this.count++
        }, 1000)
      }
    },
    stop() {
      this.isRunning = false
      clearInterval(this.timer)
    }
  },
  beforeDestroy() {
    this.stop()
  }
}

以上实现方式可根据具体需求选择，核心是确保定时器在组件销毁时被正确清理。