.capture修饰符用于在捕获阶段监听事件，等价于addEventListener的{capture:true}；适用于需父元素优先响应的场景，如全局快捷键拦截、防止stopPropagation阻断、外层统一处理拖拽。
在 Vue 3 中，`.capture` 修饰符用于将事件监听器绑定到**捕获阶段**，而不是默认的冒泡阶段。它等价于原生 addEventListener 的第三个参数设为 true。
什么时候需要 .capture
当你希望父元素在子元素之前接收到事件时使用。典型场景包括：
- 全局快捷键拦截（如按 Esc 关闭所有弹窗，需在根容器捕获，避免被子组件阻止）
- 防止子组件调用
stopPropagation()后父逻辑完全收不到事件 - 嵌套可拖拽区域中，由外层统一处理拖拽起始判断
基本写法与效果
直接在事件指令后添加 .capture 即可：
<div @click.capture="handleRootClick"> <button @click="handleBtnClick">点我</button> </div>
此时点击按钮，执行顺序是：handleRootClick → handleBtnClick（捕获阶段先触发父级，再进入目标和冒泡阶段）。
立即学习“前端免费学习笔记（深入）”；
与其他修饰符组合的注意事项
.capture 可以和 .stop、.prevent 等共存，但要注意执行顺序：
- 修饰符从左到右依次生效，
@click.capture.stop表示：先进入捕获阶段 → 触发处理器 → 立即调用stopPropagation() - 它不能和
.passive同时使用，因为passive明确禁止调用preventDefault()，而捕获阶段通常用于前置干预，二者语义冲突 -
.self在捕获模式下仍有效：@click.capture.self 只有点击该 div 自身（而非子元素）才会触发
和原生 addEventListener 的对应关系
Vue 编译后，@click.capture 会生成类似这样的代码：
element.addEventListener('click', handler, { capture: true })
这意味着它不改变事件本身，只是调整监听时机。DOM 事件流仍遵循「捕获 → 目标 → 冒泡」三阶段，Vue 只是帮你省去了手动配置 { capture: true } 的模板冗余。
