Vue 3 表单防重复提交采用请求ID锁机制，通过全局Set管理唯一锁ID，结合组合式函数useSubmitLock和自定义指令v-submit-lock实现多场景复用，并需配合服务端幂等性设计。
Vue 3 中实现表单提交的异步防重复提交事件锁机制，核心是避免同一操作在请求未完成时被重复触发。它不只是禁用按钮，而是从请求生命周期本身建立“锁”，尤其适合多组件共用同一接口、或用户可能通过不同入口（如弹窗确定、快捷键、Tab 切换后回点）重复触发的场景。
用全局请求 ID 锁住重复请求
为每次提交生成唯一标识（如 API 路径 + 关键参数哈希），在请求发起前检查该 ID 是否已在进行中。若已存在，则直接忽略本次提交。
- 创建一个轻量级锁管理器（例如 submitLock.ts）：
const pendingRequests = new Set<string>();
export const acquireLock = (id: string) => {
if (pendingRequests.has(id)) return false;
pendingRequests.add(id);
return true;
};
export const releaseLock = (id: string) => {
pendingRequests.delete(id);
};
- 在提交逻辑中使用：
const handleSubmit = async () => {
const lockId = `submit:user:profile`; // 或动态生成：`submit:${apiPath}:${JSON.stringify(params)}`
if (!acquireLock(lockId)) return;
try {
await api.updateProfile(formData);
} finally {
releaseLock(lockId);
}
};
立即学习“前端免费学习笔记（深入）”；
结合组合式函数封装成可复用逻辑
把锁逻辑和 loading 状态、错误处理打包进一个组合式函数，提升复用性与一致性。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 定义 useSubmitLock：
import { ref } from 'vue';
import { acquireLock, releaseLock } from '@/utils/submitLock';
export function useSubmitLock() {
const isSubmitting = ref(false);
const submit = async (fn: () => Promise<any>, lockId: string) => {
if (!acquireLock(lockId)) return;
isSubmitting.value = true;
try {
await fn();
} finally {
releaseLock(lockId);
isSubmitting.value = false;
}
};
return { isSubmitting, submit };
}
- 组件中调用：
const { isSubmitting, submit } = useSubmitLock();
const onSubmit = () => {
submit(() => api.createOrder(orderData), 'create:order');
};
配合自定义指令统一管控按钮行为
对普通按钮或表单提交，可通过自定义指令自动注入锁逻辑，无需每个地方手动写 acquire/release。
- 注册指令 v-submit-lock：
app.directive('submit-lock', {
mounted(el, binding) {
const handler = async () => {
const id = binding.value || el.id || 'default';
if (!acquireLock(id)) return;
el.disabled = true;
try {
await binding.instance?.$emit('submit');
} finally {
releaseLock(id);
el.disabled = false;
}
};
el.addEventListener('click', handler);
}
});
- 模板中使用：<button v-submit-lock="'save-profile'" @click="handleSave">保存</button>
注意服务端幂等性仍是最终防线
前端锁能大幅降低重复请求概率，但不能 100% 消除（比如用户刷新页面重试、多个浏览器标签同时操作）。因此必须配合服务端设计：
- 关键接口要求客户端传 idempotency-key（如 UUID），服务端校验并缓存结果
- 订单、支付类操作必须基于业务唯一键（如 user_id + order_type + timestamp 哈希）做幂等判断
- 前端锁 ID 建议与服务端 idempotency-key 保持一致，便于前后端对齐和排查
