vue实现阻塞

Vue 中实现阻塞逻辑的方法

在 Vue 中实现阻塞逻辑通常需要结合异步编程和状态管理。以下是几种常见场景的实现方式：

使用 async/await 处理异步阻塞

methods: {
  async blockingOperation() {
    this.loading = true
    await someAsyncFunction() // 等待异步操作完成
    this.loading = false
  }
}

利用 Promise 实现阻塞队列

const queue = []
let isProcessing = false

async function processQueue() {
  if (isProcessing) return
  isProcessing = true

  while (queue.length > 0) {
    const task = queue.shift()
    await task()
  }

  isProcessing = false
}

function addToQueue(task) {
  queue.push(task)
  processQueue()
}

通过 v-if 和加载状态实现界面阻塞

<template>
  <div v-if="!isBlocked">
    <!-- 正常内容 -->
  </div>
  <div v-else>
    <!-- 阻塞状态显示 -->
    <spinner />
  </div>
</template>

使用路由守卫实现页面跳转阻塞

router.beforeEach((to, from, next) => {
  if (store.state.isProcessing) {
    next(false) // 阻止导航
  } else {
    next()
  }
})

结合 Vuex 实现全局阻塞状态

const store = new Vuex.Store({
  state: {
    isBlocked: false
  },
  mutations: {
    setBlocked(state, value) {
      state.isBlocked = value
    }
  }
})

注意事项

• 避免在主线程进行长时间同步操作，这会导致界面冻结
• 对于耗时操作，考虑使用 Web Worker
• 合理设置超时机制，防止永久阻塞
• 在组件销毁时清理阻塞状态，避免内存泄漏