Vue 事件焦点

在 Vue 中，事件处理是一个重要的概念。其中之一就是事件焦点，它能让我们更灵活的处理事件。

什么是事件焦点？

事件焦点定义了事件处理的顺序。它指定了在事件流中哪个元素先接收事件，哪个元素后接收事件。在 Vue 中，它有以下 3 种方式：

• 默认（v-on）：当注册事件处理程序时，它们会自动添加到父组件的事件焦点链中。
• Capture 事件修饰符：它使用 capture 模式来处理事件。意味着在事件达到目标前，会先捕获当前元素或组件。
• Passive 事件修饰符：它告诉 Vue 你希望监听器不会调用 e.preventDefault()。

除了 Capture 和 Passive 事件修饰符之外，Vue 同样支持传入 options 对象来传递以上两种修饰符：

// 使用对象作为参数传递
options: {
  capture: true,
  passive: false
}

Capture 事件修饰符

Capture 事件修饰符使用 capture 模式来处理事件。意味着在事件达到目标前，会先捕获当前元素或组件。例如，你可以让事件在 div 元素之前处理：

<div v-on:click.capture="divClicked">
  <button>Button</button>
</div>

上面的 HTML 代码会先处理 divClicked，再处理 buttonClicked。Capture 事件修饰符同样适用于嵌套元素：

<!-- 处理 Inner Div, Outer Div, Inner Button, Outer Button 的顺序 -->
<div v-on:click.capture="outerDivClicked">
  <div v-on:click.capture="innerDivClicked">
    <button v-on:click="buttonClicked">Button</button>
  </div>
</div>

Passive 事件修饰符

Passive 事件修饰符告诉 Vue 你希望监听器不会调用 e.preventDefault()。首先我们看看如何传递参数：

<!-- 给指令传入一个对象 (键值对结构)。这样的话，我们需要使用特殊的后缀 .passive，例如： -->
<div v-on:scroll.passive="onScroll">...</div>

现在我们再看看它是如何优化性能的。Passive 事件会在 DOM 树中注册一个平台级别的监听器，而对于常规事件，每次调用监听器之前，浏览器都会检查是否调用了 e.preventDefault()。通过将它们标记为“被动的”，就可以让浏览器跳过这种检查。

总结

通过使用 Vue 事件焦点，我们可以更好的控制事件的处理顺序。Vue 提供了默认，Capture 和 Passive 事件修饰符，你可以根据实际需求选择不同的修饰符来优化程序的性能。