当前位置：首页 > VUE

vue实现队列

2026-03-07 10:59:34VUE

Vue 实现队列功能

队列是一种先进先出（FIFO）的数据结构，在 Vue 中可以通过数组或对象结合响应式特性实现。以下是几种常见实现方式：

使用数组实现基础队列

data() {
  return {
    queue: []
  }
},
methods: {
  // 入队
  enqueue(item) {
    this.queue.push(item)
  },
  // 出队
  dequeue() {
    return this.queue.shift()
  },
  // 查看队首
  peek() {
    return this.queue[0]
  },
  // 队列长度
  size() {
    return this.queue.length
  },
  // 是否为空
  isEmpty() {
    return this.queue.length === 0
  }
}

带最大容量的队列

data() {
  return {
    queue: [],
    maxSize: 10
  }
},
methods: {
  enqueue(item) {
    if (this.queue.length >= this.maxSize) {
      this.dequeue()
    }
    this.queue.push(item)
  }
  // 其他方法同上
}

使用计算属性增强功能

computed: {
  queueLength() {
    return this.queue.length
  },
  nextItem() {
    return this.queue[0]
  }
}

基于 Vuex 的全局队列

store.js 中定义：

state: {
  queue: []
},
mutations: {
  ENQUEUE(state, item) {
    state.queue.push(item)
  },
  DEQUEUE(state) {
    state.queue.shift()
  }
}

组件中使用：

vue实现队列

methods: {
  addToQueue(item) {
    this.$store.commit('ENQUEUE', item)
  },
  removeFromQueue() {
    this.$store.commit('DEQUEUE')
  }
}

带优先级的队列实现

data() {
  return {
    queue: []
  }
},
methods: {
  enqueue(item, priority = 0) {
    const queueItem = { item, priority }
    let added = false

    for (let i = 0; i < this.queue.length; i++) {
      if (priority > this.queue[i].priority) {
        this.queue.splice(i, 0, queueItem)
        added = true
        break
      }
    }

    if (!added) {
      this.queue.push(queueItem)
    }
  },
  dequeue() {
    return this.queue.shift().item
  }
}