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>标签

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

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

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

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

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

组合分析

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

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>标签，效果图如下：

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

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

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>