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>
我们点击<a>标签里面的<div>标签，效果图如下：
我们点击<a>标签，效果图如下：
可以得出：
点击自身，.prevent修饰符都阻止了<a>标签的默认事件，但是事件冒泡时没有阻止；.self修饰符阻止了事件冒泡时触发元素本身绑定的事件。
总结
现在我们再来理解官网给出的解释，就很清楚了。
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
重点就是顺序很重要,其实我们可以这么理解：
.prevent修饰符在前，修饰的是元素的v-on事件，所以它会阻止所有的点击，自身点击和事件冒泡；
.prevent修饰符在后，修饰的是元素的v-on事件在被.self修饰后的事件，所以它只能阻止对元素自身的点击，无法阻止事件冒泡。
其实很简单，关键官网给出的解释没有再细化，所以感觉很模糊。好好理解好修饰顺序，后面的修饰的是前面修饰符修饰后的事件，可以理解为流式编程。
网友评论