vue实现阻塞
阻塞实现方法
在Vue中实现阻塞操作通常涉及同步代码执行、异步控制或界面交互阻断。以下是几种常见场景的实现方式：
同步阻塞
使用while循环或同步方法强制阻塞主线程（不推荐，会导致界面冻结）：
function syncBlock(ms) {
const start = Date.now();
while (Date.now() - start < ms) {}
}
// 调用会冻结界面5秒
syncBlock(5000);异步阻塞
通过Promise和async/await模拟非界面冻结的阻塞：
async function asyncBlock(ms) {
await new Promise(resolve => setTimeout(resolve, ms));
}
// 使用方式
async function init() {
console.log('开始阻塞');
await asyncBlock(3000); // 阻塞3秒但不冻结界面
console.log('阻塞结束');
}界面交互阻断
通过v-loading或自定义模态框阻止用户操作：
<template>
<div v-loading="isBlocking">内容区域</div>
<button @click="startBlock">开始阻塞</button>
</template>
<script>
export default {
data() {
return { isBlocking: false }
},
methods: {
async startBlock() {
this.isBlocking = true;
await new Promise(resolve => setTimeout(resolve, 2000));
this.isBlocking = false;
}
}
}
</script>路由阻塞
通过路由守卫实现导航阻断：
router.beforeEach((to, from, next) => {
if (shouldBlockNavigation) {
next(false); // 取消导航
} else {
next();
}
});注意事项
- 同步阻塞会直接冻结浏览器主线程，导致界面无响应
- 异步阻塞需结合Promise或setTimeout实现非冻结等待
- 对于用户交互阻断，推荐使用可视化反馈（如加载状态）
- 路由级阻塞需谨慎使用，避免破坏用户体验
