vue实现setinterval
在 Vue 中使用 setInterval
Vue 中可以通过生命周期钩子和方法结合 setInterval 实现定时任务。以下是一个完整的实现示例：
<template>
<div>
<p>计数器: {{ count }}</p>
<button @click="startTimer">开始</button>
<button @click="stopTimer">停止</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
timer: null
}
},
methods: {
startTimer() {
if (this.timer) return
this.timer = setInterval(() => {
this.count++
}, 1000)
},
stopTimer() {
clearInterval(this.timer)
this.timer = null
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>关键点说明
-
存储 timer 引用
将setInterval返回的 timer ID 存储在组件数据中，便于后续清除。 -
组件销毁时清理
在beforeDestroy生命周期钩子中清除定时器，避免内存泄漏。
-
手动控制启停
通过startTimer和stopTimer方法提供手动控制能力。
进阶用法 - 封装为可复用逻辑
可以通过 Vue 的 composition API（Vue 3）或 mixin（Vue 2）封装定时器逻辑：
// Vue 3 composition API
import { ref, onUnmounted } from 'vue'
export function useInterval(callback, delay) {
const timer = ref(null)
const start = () => {
timer.value = setInterval(callback, delay)
}
const stop = () => {
clearInterval(timer.value)
timer.value = null
}
onUnmounted(stop)
return { start, stop }
}使用示例
import { useInterval } from './useInterval'
export default {
setup() {
const count = ref(0)
const { start, stop } = useInterval(() => {
count.value++
}, 1000)
return { count, start, stop }
}
}注意事项
-
避免直接修改 DOM
Vue 是数据驱动的，应通过修改数据而非直接操作 DOM 来实现更新。 -
性能考虑
高频定时任务（如动画）建议使用requestAnimationFrame替代setInterval。 -
SSR 兼容性
服务端渲染时需确保定时器只在客户端执行，可通过process.client判断（Nuxt.js）。
