Vue.js 定时任务动态调整接口参数方案

在 Vue.js 中实现根据时间动态调整接口参数的需求，可以通过以下几种方式实现：

方案一：使用 setTimeout/setInterval + 计算属性

export default {
  data() {
    return {
      currentTime: new Date(),
      timer: null
    }
  },
  computed: {
    apiParams() {
      const hour = this.currentTime.getHours()

      // 根据时间动态调整参数
      if (hour >= 6 && hour < 12) {
        return { period: 'morning', priority: 'high' }
      } else if (hour >= 12 && hour < 18) {
        return { period: 'afternoon', priority: 'medium' }
      } else {
        return { period: 'night', priority: 'low' }
      }
    }
  },
  mounted() {
    // 每分钟更新一次时间
    this.timer = setInterval(() => {
      this.currentTime = new Date()
    }, 60000)

    // 初始加载数据
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 使用计算属性中的动态参数
      axios.get('/api/data', { params: this.apiParams })
        .then(response => {
          // 处理响应
        })
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

方案二：使用 Vue 插件 vue-timers

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

Vue.use(VueTimers)

export default {
  data() {
    return {
      apiParams: {}
    }
  },
  timers: {
    updateParams: { time: 60000, autostart: true, immediate: true }
  },
  methods: {
    updateParams() {
      const hour = new Date().getHours()

      // 更新参数
      if (hour >= 6 && hour < 12) {
        this.apiParams = { period: 'morning', priority: 'high' }
      } else if (hour >= 12 && hour < 18) {
        this.apiParams = { period: 'afternoon', priority: 'medium' }
      } else {
        this.apiParams = { period: 'night', priority: 'low' }
      }

      // 触发数据获取
      this.fetchData()
    },
    fetchData() {
      axios.get('/api/data', { params: this.apiParams })
        .then(response => {
          // 处理响应
        })
    }
  }
}

方案三：使用 Web Worker 处理定时任务（适合复杂场景）

// worker.js
self.onmessage = function(e) {
  if (e.data === 'start') {
    setInterval(() => {
      const hour = new Date().getHours()
      let params

      if (hour >= 6 && hour < 12) {
        params = { period: 'morning', priority: 'high' }
      } else if (hour >= 12 && hour < 18) {
        params = { period: 'afternoon', priority: 'medium' }
      } else {
        params = { period: 'night', priority: 'low' }
      }

      self.postMessage(params)
    }, 60000)
  }
}

// Vue 组件
export default {
  data() {
    return {
      apiParams: {},
      worker: null
    }
  },
  mounted() {
    this.worker = new Worker('./worker.js')
    this.worker.postMessage('start')

    this.worker.onmessage = (e) => {
      this.apiParams = e.data
      this.fetchData()
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/data', { params: this.apiParams })
        .then(response => {
          // 处理响应
        })
    }
  },
  beforeDestroy() {
    this.worker.terminate()
  }
}

最佳实践建议

1. 性能考虑：对于简单的定时任务，方案一或方案二足够；复杂计算任务考虑方案三

2. 资源释放：务必在组件销毁时清除定时器或终止 Worker

3. 节流控制：频繁的接口调用应考虑节流/防抖

4. 错误处理：添加适当的错误处理机制

5. 时间精度：根据需求调整定时器间隔，避免不必要的性能开销

6. 响应式设计：利用 Vue 的响应式特性自动更新 UI

您可以根据项目具体需求和复杂度选择最适合的方案。