Vue基础教程（73）事件修饰符之capture：Vue事件修饰符.capture：我不是霸道，我只是个“插队”的时光机！

嘿，Vue玩家们！今天咱们不聊v-model，不撕v-if和v-show，来扒一扒Vue事件系统里一个看似低调、实则“霸道总裁”般的存在——.capture事件修饰符。

你是不是经常这样写代码？

<button @click="handleClick">点我呀！</button>

然后handleClick方法屁颠屁颠就跑起来了。这没问题，是Vue世界的标准操作。但如果你以为事件的世界就这么简单，那你就图样图森破了（太年轻太简单）！

真实世界的事件，可不是这么“老实巴交”的。它们像一场在DOM家族树里进行的“传话游戏”，而.capture，就是那个喜欢第一个拿到话筒的“戏精”。

第一幕：事件的“洪荒之力”——冒泡与捕获

要理解.capture，咱得先回到上古时期，啊不，是Web标准的基础知识。

想象一下这个DOM结构，一个经典的“三代同堂”：

<div class="爷爷" @click="say('爷爷')">
  <div class="爸爸" @click="say('爸爸')">
    <div class="儿子" @click="say('儿子')">
      我是按钮，点我！
    </div>
  </div>
</div>

当你点击最里面的“儿子”时，你猜猜控制台会输出什么？

如果你的直觉是只输出“儿子”，那你可就错了。浏览器的默认行为是事件冒泡！实际输出是：

儿子
爸爸
爷爷

这就叫事件冒泡： 事件从最具体的元素（孙子）开始，一层一层地向上“冒泡”到最不具体的根元素（祖宗）。就像水底的气泡，从下往上冒。

但是！但是！但是！（重要的事情说三遍）

事件传播其实有两个阶段，就像一场有严格流程的会议：

1. 捕获阶段： 从window一路向下“抓捕”到目标元素。（爷爷 -> 爸爸 -> 儿子）
2. 目标阶段： 到达实际被点击的元素。（儿子）
3. 冒泡阶段： 再从目标元素向上“冒泡”回去。（儿子 -> 爸爸 -> 爷爷）

默认情况下，我们用@click绑定的事件监