常见Vue事件修饰符浅析

一、.stop修饰符

.stop修饰符代表event.stopPropagation()，加上这个修饰符，就等于在方法中加上了这句代码。

<a @click.stop="doThis">a>
1
2

上面的代码等同于如下代码。

doThis(event){
event.stoppropagation()
}
1
2
3
4

二、.prevent修饰符(重要)

.prevent修饰符代表event.preventDefault()，加上这个修饰符，就等于在方法中加上了这句代码。例如提交submit事件后触发自动刷新页面，但是加了这个修饰符之后就不会再触发。

<form @submit.prevent="onSubmit">form>
1
2

上述代码等同于如下代码。

onSubmit(event){
event.preventDefault()
}
1
2
3

三、.capture修饰符

在事件监听器中通常有3个参数：监听的事件名称、回调函数和是否设置capture。所谓的capture就是指在事件捕获阶段监听还是在冒泡阶段监听，将其设置为true表示在捕获阶段监听，设置为false表示在冒泡阶段监听。

element.addEventListener(<event-name>,<callback>,{
capture:false,
passive:false,
once:false
});
1
2
3
4
5

设置.capture修饰符就代表在捕获阶段监听，不设置该修饰符则代表在冒泡阶段监听。所谓捕获阶段是指先执行点击元素自身的事件，再从外到里依次执行元素内部的事件。而冒泡阶段是先执行内部元素的事件，再由里到外执行父级元素的事件。

<div v-on:click.capture="doThis">...div>
1

相当于

<div ref="div">div>
const app=new Vue({
el:'#app',
mounted(){
       this.$refs.div.addEventListener('click',doThis,{capture:ture})
}
})
1
2
3
4
5
6
7

四、.passive修饰符

通常在监听时间的时候，只有当监听事件的方法执行完成后才会执行默认的操作。例如执行滚动操作，当监听页面的滚动事件时，只有当方法执行过程结束后页面才会滚动，但当在移动端时就会造成滚动卡顿的现象。
添加.passive修饰符，等于告诉浏览器不需要等到方法执行完成后再去触发滚动事件，而是立刻触发。这样可以提升移动端性能，为用户带来流畅的操作体验，因此.passive修饰符在移动端的使用比较常见。

<div v-on:scroll.passive="onScroll">...div>
1

等于

<div ref="div">...div>
const app=new Vue({
el:'app',
mounted(){
this.$refs.div.addEventListener('scroll',onScroll,{passive:true})
}
})
1
2
3
4
5
6
7