vue定时器实现逻辑
Vue 定时器的实现逻辑
在 Vue 中实现定时器功能通常涉及 setInterval 或 setTimeout 的使用，同时需要注意生命周期管理和内存泄漏问题。
基本定时器实现
使用 setInterval 实现周期性任务：
export default {
data() {
return {
timer: null,
count: 0
}
},
mounted() {
this.timer = setInterval(() => {
this.count++
console.log('Tick:', this.count)
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}使用 setTimeout 实现延迟执行
export default {
methods: {
delayedAction() {
setTimeout(() => {
console.log('执行延迟操作')
}, 2000)
}
}
}组件销毁时清除定时器
为防止内存泄漏，必须在组件销毁前清除定时器：
export default {
data() {
return {
timer: null
}
},
mounted() {
this.startTimer()
},
methods: {
startTimer() {
this.timer = setInterval(() => {
// 定时任务
}, 1000)
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}使用 Vue 3 Composition API
在 Vue 3 中可以使用 onUnmounted 生命周期钩子：
import { ref, onUnmounted } from 'vue'
export default {
setup() {
const count = ref(0)
const timer = ref(null)
timer.value = setInterval(() => {
count.value++
}, 1000)
onUnmounted(() => {
clearInterval(timer.value)
})
return { count }
}
}使用插件封装定时器
可以封装可复用的定时器逻辑：
// timer.js
export function useTimer(callback, interval) {
const timer = ref(null)
const start = () => {
timer.value = setInterval(callback, interval)
}
const stop = () => {
clearInterval(timer.value)
}
onUnmounted(stop)
return { start, stop }
}注意事项
- 避免在
created钩子中使用 DOM 相关操作，应使用mounted - 确保每个创建的定时器都有对应的清理逻辑
- 对于复杂场景，可以考虑使用 Web Worker 处理长时间运行的定时任务
- 在单页应用中，路由切换时组件会被销毁，必须清理定时器
以上实现方式覆盖了 Vue 2 和 Vue 3 中定时器的基本使用场景，开发者可以根据具体需求选择适合的方案。
