vue实现队列
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()
}
}组件中使用：
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
}
}注意事项
- Vue 的响应式系统会自动跟踪数组变化，但直接通过索引修改元素（如 this.queue[0] = newValue）需要使用 Vue.set
- 大型应用建议使用 Vuex 管理队列状态
- 高频操作场景应考虑性能优化，如使用对象代替数组实现队列
