Vue 事件修饰符的基础小点： prevent 与 passive

prevent

对于元素拥有自身的默认事件时（如 a[href="#"] ，button[type="submit"] ）， 这种标签在被动或自发触发事件时，会在执行完触发事件后，最后自动执行本身默认事件。

注意默认事件在触发事件执行完后执行，并且不会因为stop修饰符而阻止。

不加 prevent 修饰符：

<!-- 注：clickFunc 为事件函数 -->
<a @click="clickFunc" href="javascript:alert('default active')">点击</a>
<!-- 点击后 执行 clickFunc 事件函数，并提示default active -->

添加 prevent 修饰符：

<!-- 注：clickFunc 为事件函数 -->
<a @click.prevent="clickFunc" href="javascript:alert('default a')">点击</a>
<!-- 点击后 执行 clickFunc 事件函数，并没有提示default active -->

---

passive

passive这个修饰符会执行默认方法。你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。

浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。

通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

所以这个 .passive 修饰符尤其能够提升移动端的性能

这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

注：passive和prevent冲突，不能同时绑定在一个监听器上。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。