.vue中.capture修饰符使事件处理器在捕获阶段执行，即浏览器事件流的捕获→目标→冒泡三阶段中最早阶段，由外向内触发，用于提前拦截事件，常见于全局快捷键、遮罩层关闭及统一流量监控等场景。

Vue 中的 .capture 修饰符用于让事件处理器在捕获阶段执行，而不是默认的冒泡阶段。它本质是启用原生 DOM 的事件捕获机制，使外层元素能“提前拦截”事件，在事件到达目标前就响应。

什么是捕获阶段？

浏览器事件流分三个阶段：捕获 → 目标 → 冒泡。
默认情况下（不加 .capture），Vue 的事件监听器只在目标阶段或冒泡阶段触发；
加上 @click.capture 后，监听器会在捕获阶段从最外层祖先向下传递时就被触发。

怎么写 .capture 修饰符？

语法很简单：在事件绑定后加 .capture 即可，例如：

• <div> <li><code><button>点我</button>

注意：.capture 只作用于当前绑定的元素，不影响子元素是否冒泡，也不改变子元素自身的监听时机。


vue-component-analyzer
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
下载

捕获和冒泡混合时的执行顺序

当多个嵌套元素同时使用 .capture 和普通绑定时，执行顺序遵循标准事件流规则：

• 先执行所有 捕获阶段 的处理器（由外向内）
• 再执行 目标阶段 的处理器（即点击的那个元素）
• 最后执行 冒泡阶段 的处理器（由内向外）

示例：

<div>
  outer
  <div>
    inner
    <button>click</button>
  </div>
</div>

点击 button 时输出顺序为：
outer-capture → inner-capture → target

常见使用场景

• 全局快捷操作拦截：比如在根容器上用 @keydown.capture 拦截 Esc 键关闭弹窗，避免被子组件事件干扰
• 防止误触穿透：模态框外层遮罩层用 @click.capture 关闭弹窗，确保即使点击内部表单也能优先响应遮罩逻辑
• 统一日志或权限校验：在布局容器上捕获用户交互，做埋点或操作前检查，无需每个按钮重复写