Vue--事件修饰符prevent 和self

v-on

v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

• 缩写：@
• 预期：Function | Inline Statement | Object
• 参数：event
• 修饰符：
  .stop - 调用 event.stopPropagation()。
  .prevent - 调用 event.preventDefault()。
  .capture - 添加事件侦听器时使用 capture 模式。
  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  .native - 监听组件根元素的原生事件。
  .once - 只触发一次回调。
  .left - (2.2.0) 只当点击鼠标左键时触发。
  .right - (2.2.0) 只当点击鼠标右键时触发。
  .middle - (2.2.0) 只当点击鼠标中键时触发。
  .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

passive

Vue 2.3.0 新增的。.passive 修饰符是对 addEventListener 中的 passive 选项。
.prevent 是拦截默认事件，.passive是不拦截默认事件。
addEventListener的options参数中的passive:
设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
.passive这个修饰符会执行默认方法。明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了：

浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，
所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。

简单点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault()阻止该次事件的默认动作。
我们加上.passive就是为了告诉浏览器，不用查询了，我们没用preventDefault()阻止默认动作。
鉴于这个作用，.passive 修饰符尤其能够提升移动端的性能。在滚动监听，@scoll，@touchmove 时，每次都使用内核线程查询prevent会使滑动卡顿,使用.passive 修饰符跳过内核线程查询，可以大大提高流畅度。

修饰符顺序问题

官网教程在解释时，是这么说的：
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
咋一看，能理解，仔细一推敲，云里雾里。（下面就就这个问题分析一下，要想搞明白，举例最明了）。

分析

有上面的修饰符解释，单独的.prevent和.self。都好理解。

 无修饰符//无任何修饰符
 prevent修饰符//prevent修饰符
 self修饰符//self修饰符

点击三个标签

上图是分别依次点击三个标签的效果，咋看.prevent阻止了标签的默认事件，.self好像没效果。我们再举个，看看.self的效果。

   

        a标签
          
div标签
        
      

上图是点击标签里面的

标签，事件触发分别为：弹框3->弹框2->弹框1->标签的默认事件触发跳转链接，在事件冒泡时，上级父元素的事件一级一级的触发，最后触发默认事件。

   

        a标签
          
div标签
        
      

上图是点击标签里面的

标签，发现标签加了.self之后，事件触发分别为：弹框3->弹框1->标签的默认事件触发跳转链接，在事件冒泡时，跳过了标签本身绑定的的事件。这就是.self修饰符的作用--只当事件是从侦听器绑定的元素本身触发时才触发回调。

组合分析

单个修饰符的功能通过上面的示例，应该有了一定的了解，现在我们组合起来，看看效果。

• v-on:click.prevent.self

    

        a标签
          
div标签
        
      

我们点击标签里面的

标签，效果图如下：

我们点击标签，效果图如下：

可以得出：
不管是点击自身，还是由于事件冒泡，.prevent修饰符都阻止了标签的默认事件；.self修饰符阻止了事件冒泡时触发元素本身绑定的事件。

• v-on:click.self.prevent

 

        a标签
          
div标签
        
      

我们点击标签里面的

标签，效果图如下：

我们点击标签，效果图如下：

可以得出：
点击自身，.prevent修饰符都阻止了标签的默认事件，但是事件冒泡时没有阻止；.self修饰符阻止了事件冒泡时触发元素本身绑定的事件。

总结

现在我们再来理解官网给出的解释，就很清楚了。
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
重点就是顺序很重要,其实我们可以这么理解：
.prevent修饰符在前，修饰的是元素的v-on事件，所以它会阻止所有的点击，自身点击和事件冒泡；
.prevent修饰符在后，修饰的是元素的v-on事件在被.self修饰后的事件，所以它只能阻止对元素自身的点击，无法阻止事件冒泡。
其实很简单，关键官网给出的解释没有再细化，所以感觉很模糊。好好理解好修饰顺序，后面的修饰的是前面修饰符修饰后的事件，可以理解为流式编程。