v-on

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

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>标签的效果，咋看.prevent阻止了标签的默认事件，.self好像没效果。我们再举个🌰，看看.self的效果。

   <div @click="alert(1)">
        <a href="/#" @click="alert(2)"
          <div class="div_in" @click="alert(3)">div标签</div>
上图是点击<a>标签里面的<div>标签，事件触发分别为：弹框3->弹框2->弹框1-><a>标签的默认事件触发跳转链接，在事件冒泡时，上级父元素的事件一级一级的触发，最后触发默认事件。

   <div @click="alert(1)">
        <a href="/#" @click.self="alert(2)"
          <div class="div_in" @click="alert(3)">div标签</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)"
          <div class="div_in" @click="alert(3)">div标签</div>
我们点击<a>标签里面的<div>标签，效果图如下：

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

v-on:click.self.prevent
 <div class="div_area" @click="alert(1)">
        <a href="/#" @click.self.prevent="alert(2)"
          <div class="div_in" @click="alert(3)">div标签</div>
我们点击<a>标签里面的<div>标签，效果图如下：

点击自身，.prevent修饰符都阻止了<a>标签的默认事件，但是事件冒泡时没有阻止；.self修饰符阻止了事件冒泡时触发元素本身绑定的事件。
现在我们再来理解官网给出的解释，就很清楚了。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。