Vue 中优雅停止定时器的解决方案

在 Vue 应用中，定时器(如 setInterval 或 setTimeout)如果不正确清理可能会导致内存泄漏和性能问题。以下是几种优雅停止定时器的方法：

1. 组件生命周期中管理定时器

export default {
  data() {
    return {
      timer: null,
      counter: 0
    }
  },
  mounted() {
    // 启动定时器
    this.timer = setInterval(() => {
      this.counter++
      console.log('Counter:', this.counter)
    }, 1000)
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}

2. 使用 Vue 3 Composition API

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

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

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

    onUnmounted(() => {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    })

    return { counter }
  }
}

3. 使用可复用组合函数

// useInterval.js
import { onUnmounted } from 'vue'

export function useInterval(callback, delay) {
  let intervalId = null

  const start = () => {
    stop()
    intervalId = setInterval(callback, delay)
  }

  const stop = () => {
    if (intervalId) {
      clearInterval(intervalId)
      intervalId = null
    }
  }

  onUnmounted(stop)

  return { start, stop }
}

// 在组件中使用
import { useInterval } from './useInterval'

export default {
  setup() {
    const { start, stop } = useInterval(() => {
      console.log('Interval running')
    }, 1000)

    // 手动启动
    start()

    return { stop }
  }
}

4. 使用第三方库

考虑使用专门处理定时器的库，如 vue-use 中的 useIntervalFn:

import { useIntervalFn } from '@vueuse/core'

export default {
  setup() {
    const { pause, resume } = useIntervalFn(() => {
      console.log('Interval running')
    }, 1000)

    return { pause, resume }
  }
}

最佳实践

1. 始终清理定时器：在组件销毁前确保清除所有定时器
2. 避免匿名函数：使用具名函数便于调试和清理
3. 考虑使用 requestAnimationFrame：对于动画等高频更新，requestAnimationFrame 通常比 setInterval 更合适
4. 避免在 computed 或 watch 中创建定时器：这些地方不适合副作用操作

通过以上方法，可以确保 Vue 应用中的定时器得到正确管理，避免资源浪费和潜在的内存泄漏问题。