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。都好理解。

 <a href="https://www.baidu.com/" @click="alert('none')">无修饰符</a >//无任何修饰符
 <a href="https://www.baidu.com/" @click.prevent="alert('prevent')">prevent修饰符</a >//prevent修饰符
 <a href="https://www.baidu.com/" @click.self="alert('self')">self修饰符</a>//self修饰符

点击三个<a>标签

   <div @click="alert(1)">
        <a href="/#" @click="alert(2)"
          >a标签
          <div class="div_in" @click="alert(3)">div标签</div>
        </a>
      </div>

   <div @click="alert(1)">
        <a href="/#" @click.self="alert(2)"
          >a标签
          <div class="div_in" @click="alert(3)">div标签</div>
        </a>
      </div>

组合分析

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

• v-on:click.prevent.self

    <div class="div_area" @click="alert(1)">
        <a href="/#" @click.prevent.self="alert(2)"
          >a标签
          <div class="div_in" @click="alert(3)">div标签</div>
        </a>
      </div>

我们点击<a>标签里面的<div>标签，效果图如下：

• v-on:click.self.prevent

 <div class="div_area" @click="alert(1)">
        <a href="/#" @click.self.prevent="alert(2)"
          >a标签
          <div class="div_in" @click="alert(3)">div标签</div>
        </a>
      </div>

我们点击<a>标签里面的<div>标签，效果图如下：

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

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

总结

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