vue 的事件修饰符 capture 到底怎么回事？

Question

<div id="app">
<div @click="btn0" style=" width:300px;height:300px; border:1px solid red;background:#606060">0
<div @click.capture="btn1" style=" width:200px;height:200px; border:1px solid red;background:#CCC">1
<div @click="btn2" style=" width:100px;height:100px; border:1px solid red;background:#f5f5f5">2
  <button @click="btn3">3</button>
</div>
</div>
</div>
   </div>

<script src="https://cn.vuejs.org/js/vue.min.js"></script>
<script>
let vm=new Vue({
el:'#app',
   data:[],
    methods:{
        btn0(){
          alert('btn0')
           },
        btn1:function(){
            alert('btn1')
        },
        btn2:function(){
            alert('btn2')
        },
 btn3:function(){
            alert('btn3')
        }
    },
})
</script>

点击按钮之后事件触发的顺序
btn1->btn3->btn2->btn0
如果把 capture放在 btn2上面，则事件触发的顺序变成了：
btn2->btn3->btn1->btn0

最后总结的优先级规律是：

1. 设置了capture的
2. 真正被点击的
3. 结束了capture之后，依照冒泡顺序
4. 已经出发的事件(capture)，在冒泡阶段会忽略不再触发

这个结论对不对，为什么会这样？

Answer 1

顺序其实就是：

• 从外到内的事件捕获顺序执行有 capture 的元素click事件
• 再从点击的元素开始，从内到外事件冒泡顺序执行 click 事件（过滤掉已捕获的元素）

demo链接：
https://codepen.io/liangxh052...
参考链接；
https://cn.vuejs.org/v2/guide...

Answer 2

DOM事件模型有三个阶段：捕获、目标、冒泡。

捕获是自上而下的，就是从window对象到祖先元素，最后到元素本身，而冒泡相反，是自下而上的。

一般我们绑定事件可以使用dom.addEventListener(etype, fn, capture)，第三个元素capture就是决定事件在哪个阶段执行，capture设置为true，在捕获阶段执行，capture设置为false，在冒泡阶段执行，这也是默认的。

所以正常情况下，事件是从下往上的触发，即btn3->btn2->btn1->btn0，但是你在哪个事件上设置capture后，就会把这个事件的触发提升到捕获阶段，这也就早于其他事件的执行了。