当前位置：首页 > VUE

vue定时器简单实现

2026-01-12 05:41:24VUE

使用 `setTimeout` 实现单次定时任务

在 Vue 中可以通过 setTimeout 实现单次延迟执行。以下是一个简单示例：

export default {
  methods: {
    delayedAction() {
      setTimeout(() => {
        console.log('延迟1秒后执行');
      }, 1000);
    }
  },
  mounted() {
    this.delayedAction();
  }
}

使用 `setInterval` 实现周期性定时任务

对于需要重复执行的任务，可以使用 setInterval：

export default {
  data() {
    return {
      timer: null,
      count: 0
    };
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.count++;
        console.log(`计数: ${this.count}`);
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
    }
  },
  beforeDestroy() {
    this.stopTimer();
  }
}

在生命周期中管理定时器

为避免内存泄漏，需要在组件销毁时清除定时器：

vue定时器简单实现

export default {
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      // 定时任务逻辑
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}

使用 Vue 的 `$once` 自动清理

结合 Vue 实例方法可以更优雅地处理清理：

export default {
  mounted() {
    const timer = setInterval(() => {
      // 定时任务逻辑
    }, 1000);

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

使用第三方库 `vue-timers`

对于更复杂的需求，可以使用专门为 Vue 设计的定时器库：

vue定时器简单实现

安装：

npm install vue-timers

使用示例：

import Vue from 'vue';
import VueTimers from 'vue-timers';

Vue.use(VueTimers);

export default {
  timers: {
    logTime: { time: 1000, autostart: true, repeat: true }
  },
  methods: {
    logTime() {
      console.log(Date.now());
    }
  }
}