vue定时器实现逻辑

Vue 定时器实现逻辑

在 Vue 中实现定时器功能通常涉及 setInterval 或 setTimeout 的使用，同时需要注意组件生命周期和内存管理。

使用 setInterval 实现周期性任务

在 Vue 组件的 data 中定义定时器变量，以便在组件销毁时清除定时器：

data() {
  return {
    timer: null,
    counter: 0
  }
}

在 mounted 钩子中启动定时器，并在 beforeDestroy 中清除：

mounted() {
  this.timer = setInterval(() => {
    this.counter++
    console.log('Counter:', this.counter)
  }, 1000)
}

beforeDestroy() {
  clearInterval(this.timer)
}

使用 setTimeout 实现延迟任务

对于一次性延迟任务，可以使用 setTimeout：

mounted() {
  this.timer = setTimeout(() => {
    console.log('Delayed task executed')
  }, 3000)
}

beforeDestroy() {
  clearTimeout(this.timer)
}

使用 Vue 3 Composition API

在 Vue 3 中，可以使用 setup 函数和生命周期钩子：

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

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

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

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

    return { counter }
  }
}

注意事项

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

对于需要响应式更新的数据，确保使用 Vue 的响应式系统（如 data 属性或 ref）。

在大型应用中，可以考虑将定时器逻辑封装为自定义 Hook 或 Mixin 以便复用。