当前位置：首页 > VUE

vue定时器简单实现

2026-02-09 18:42:36VUE

定时器的基本使用

在Vue中可以使用JavaScript原生的setTimeout和setInterval实现定时功能。setTimeout用于延迟执行一次，setInterval用于周期性重复执行。

// 一次性定时器
setTimeout(() => {
  console.log('延迟执行');
}, 1000);

// 周期性定时器
const timer = setInterval(() => {
  console.log('每隔1秒执行');
}, 1000);

// 清除定时器
clearInterval(timer);

在Vue组件中使用

在Vue组件中，通常需要将定时器存储在组件的data或setup中，以便在组件销毁时清除定时器，避免内存泄漏。

Options API写法：

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

Composition API写法：

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    let timer = null;

    onMounted(() => {
      timer = setInterval(() => {
        console.log('定时执行');
      }, 1000);
    });

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

使用Vue的ref管理定时器

在Composition API中，可以使用ref来管理定时器，使代码更加清晰。

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

export default {
  setup() {
    const timer = ref(null);

    onMounted(() => {
      timer.value = setInterval(() => {
        console.log('定时执行');
      }, 1000);
    });

    onBeforeUnmount(() => {
      clearInterval(timer.value);
    });
  }
}

封装可复用的定时器Hook

可以将定时器逻辑封装成可复用的Composition API Hook。

// useInterval.js
import { ref, onBeforeUnmount } from 'vue';

export function useInterval(callback, delay) {
  const timer = ref(null);

  const start = () => {
    timer.value = setInterval(callback, delay);
  };

  const stop = () => {
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
  };

  onBeforeUnmount(stop);

  return { start, stop };
}

使用示例：

import { useInterval } from './useInterval';

export default {
  setup() {
    const { start, stop } = useInterval(() => {
      console.log('定时执行');
    }, 1000);

    // 启动定时器
    start();

    // 5秒后停止定时器
    setTimeout(() => {
      stop();
    }, 5000);
  }
}