彻底弄懂 Vue 事件修饰符

其实这一块的内容并不难，但总是看后就忘。记录于此方便以后查阅，并与大家分享。

首先给大家画一个示意图，理解一下什么是冒泡和捕获

• 冒泡：事件由内而外依次触发
• 捕获：事件由外向内依次触发

冒泡与捕获示意图

如果你看不懂上图，那证明你想复杂了。简而言之：冒泡就是 由内而外 依次触发事件，捕获则是 由外向内 依次触发事件。

.stop 修饰符

请看如下代码：

<template>
  <div class="box1" @click="test1">
    <span>测试1</span>
    <div class="box2" @click="test2">
      <span>测试2</span>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    test1(){
      console.log('test1')
    },
    test2(){
      console.log('test2')
    }
  }
}
</script>

<style scoped lang="scss">
.app {
  display: flex;
  justify-content: center;
  align-items: center;

  .box1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #d09966;
    color: #fff;
    width: 200px;
    height: 200px;

    .box2 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #e06c75;
      color: #fff;
      margin-top: 20px;
      width: 50px;
      height: 50px;
    }
  }
}
</style>

由以上代码可以看到我们有一个嵌套的div，每一个div都绑定着一个事件，如果我们点击div的话是按什么顺序触发这两个事件的呢。其实是默认按照冒泡的方式触发的，简单来说就是由内而外，如果还是不明白请看上面的解析图。

此Vue文件最终生成的界面是这个样子的

结果

当我们点击 测试2 区域的时候，默认按照冒泡方式触发函数，控制台打印结果如下：

image.png

现在就是.stop发挥作用的时候了，修改代码如下

<template>
  <div class="box1" @click="test1">
    <span>测试1</span>
    <div class="box2" @click.stop="test2">
      <span>测试2</span>
    </div>
  </div>
</template>

这样我们在点击之后控制台打印结果如下

image.png

由这个结果我们可以看到，这个修饰符的作用就是阻止事件冒泡，不让他向外去执行函数，到此为止

.capture 修饰符

如上一节所说，网页默认是按照冒泡方式去触发事件的，但是当我们使用.capture修饰符时，网页就会按照捕获的方式触发事件，也就是从外向内执行。但是这个时候一定要注意 .capture修饰符一定要写在外层才能生效。

<template>
  <div class="app">
    <div class="box1" @click.capture="test1">
      <span>测试1</span>
      <div class="box2" @click="test2">
        <span>测试2</span>
      </div>
    </div>
  </div>
</template>

当我们点击 测试2 区域之后，控制台的打印如下

image.png

. prevent 修饰符

现在，我们再来说一下 .prevent 修饰符，其作用就是阻止组件本来应该发生的事件，转而去执行自己定义的事件

考虑以下代码：

<template>
  <div>
    <a href="https://github.com/stevecchow" @click.prevent="test">该链接点击后不会跳转</a>
  </div>
</template>

<script>
export default {
  methods:{
    test2(){
      console.log('test')
    }
  }
}
</script>

我们在上述代码中添加了 .prevent 修饰符，接下来的结果我们能够预料到，点击链接之后，网页不会跳转到我写的网址中，而是在控制台打印出了如下结果：

image.png

而当我们去掉 .prevent 修饰符 后，点击该链接则会执行 a 标签的默认行为，根据链接跳转到相应网址。

.once 修饰符

从名称可以看出，该修饰符具有“唯一性”的内涵。加上此修饰符之后，无论你点击多少下，相应的函数只允许被触发一次，函数就只触发一次。

.self 修饰符

添加该修饰符后，只有当前元素自身触发处理函数时，事件才会触发。
原理：是根据 event.target 确定是否当前元素本身，来决定是否触发的事件/函数。
考虑如下代码：

<template>
  <div class="box1" @click.self="test1">
    <span>测试1</span>
    <div class="box2" @click="test2">
      <span>测试2</span>
    </div>
  </div>
</template>

当我们点击 测试2 的时候，冒泡不会执行（test1 方法不会执行），因为 event.target 指的是 测试2 的dom元素，不是外部 测试1 的，所以不会触发 test1 的点击事件

. passive 修饰符

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

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

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

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

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