1. Vue 3中的事件处理器
在Vue 3中，事件处理器是相当重要的一个特征。一些基础的事件处理器像@click、@keydown,以及@change等等肯定都很好使，但是这些事件并不总是能良好地满足我们的需求。所以，Vue框架还提供了一系列高级事件处理器，以优化用户交互体验。
Vue中的事件处理器有两种前缀：v-on和@，这两种方式是等效的。为了避免和绑定属性(element attributes)混淆，Vue3中的事件处理器必须带有v-on前缀。
一个事件处理器（event handler）就是一个JS方法，该方法会通过DOM事件来触发执行。例如，以下是一个简单的事件处理器，用于在Vue 3应用程序中监听一个按钮的点击事件。
<template>
<button @click="sayHello">Click me</button>
</template>
<script>
export default {
methods: {
sayHello() {
alert('Hello, World!');
}
}
}
</script>
在上面的示例中，@click是一个绑定在<button>元素上的事件监听器（event listener），sayHello()是在按钮点击时触发的方法。当按钮被点击时，sayHello()方法就会执行。
2. Vue 3中的事件修饰符
2.1 按键修饰符
按键修饰符用于指定在某个元素上监听按键事件时需要按下的具体键位。
例如，我们可以在[v-on]中使用.键名修饰符的形式监听键盘事件。示例代码如下：
<input @keydown.enter="submit">
上面的示例代码会在用户按下键盘上的Enter键时触发submit()方法执行。
2.2 系统修饰符
系统修饰符可以用来指定事件监听器应该仅在特定的按键被按下时再触发。比如，只有同时按下Ctrl和Enter键时才会触发该事件的监听器。
示例代码如下：
<input @keydown.ctrl.enter="send">
在上面的示例中，<input>元素只有在同时按下Ctrl和Enter键时才会触发send()方法执行。
2.3 鼠标修饰符
当我们监听一个鼠标事件时，有时候我们需要知道鼠标移动的方向，或者需要针对具体的鼠标按键进行不同的事件监听。Vue 3提供了鼠标修饰符来解决这些问题。
以下是Vue 3中的鼠标修饰符：
.left
.right
.middle
.shift
.ctrl
.alt
.meta
.exact
.left、.right以及.middle修饰符用于监听鼠标左键、右键、中键的点击事件。示例代码如下：
<button @mousedown.left="handleLeftClick">Left-click me</button>
<button @mousedown.right="handleRightClick">Right-click me</button>
<button @mousedown.middle="handleMiddleClick">Middle-click me</button>
.shift、.ctrl、.alt、.meta修饰符表示键盘上对应的按键同时被按下时触发该事件监听器。
.exact修饰符可以确保只有在所有指定的按键都被按下时事件监听器才会触发，例如：
<button @click.exact="handleLeftClick">Only handle left-click</button>
2.4 .stop修饰符
.stop修饰符用于防止事件冒泡到DOM上层。这个修饰符很常用，尤其当我们在嵌套的场景下需要避免外层监听器接收到同类型的事件时。
示例代码如下：
<div @click.stop="handleDivClick">
<button @click="handleButtonClick">Click me</button>
</div>
在上面的示例中，当用户在点击按钮时，并不会触发handleDivClick()方法执行。
2.5 .prevent修饰符
.prevent修饰符可以阻止浏览器默认行为。例如，在一个表单的提交事件里，可以把浏览器默认的表单提交行为取消掉，而改为自己处理提交行为的代码：
<form @submit.prevent="submit">
<!-- ... -->
</form>
当用户提交表单时，submit方法会阻止默认的表单提交行为，并且执行我们自己的submit方法。
2.6 .capture修饰符
.capture修饰符可以用来监听一个事件的捕获阶段（capturing phase）。具体来说，事件捕获阶段是在DOM树的根节点捕获事件的过程，然后逐层冒泡到子元素。通俗地讲，就是从最外层的元素开始监听事件。
示例代码如下：
<div @click.capture="handleDivClick">
<button @click="handleButtonClick">Click me</button>
</div>
在上面的示例中，当用户点击按钮时，先会进入div元素的事件捕获阶段，然后才会进入button元素的事件冒泡阶段。
2.7 .self修饰符
.self修饰符可以用来限制只有在事件被绑定的元素自身接收到事件时才会触发事件监听器。例如：
<div @click.self="handleDivClick">
<button @click="handleButtonClick">Click me</button>
</div>
在上面的示例中，当用户点击按钮时，事件监听器将不会执行。只有当用户点击div元素本身时，事件监听器才会执行。
2.8 .once修饰符
.once修饰符可以用来限制只有在第一次触发事件时才会执行指定的方法。该修饰符很实用，特别是在处理一些特定场景下的事件时，例如点击一次性的按钮时：
<button @click.once="handleOnlyClick">Click me only once</button>
在上面的示例中，当用户点击按钮时，只有第一次点击时handleOnlyClick()方法才会执行。后续的点击都将不会触发该方法执行。
2.9 .passive修饰符
.passive修饰符用于提高页面的滚动性能。它可以告诉浏览器当前的事件监听器不会取消滚动行为，因此浏览器就可以在事件监听器中进行一些额外的优化，以提高滚动性能。
示例代码如下：
<div @scroll.passive="handleScroll">...</div>
上面的示例中，当用户在div元素中滚动页面时，事件监听器handleScroll()方法会得到执行。
结语
事件处理器和修饰符是Vue 3中重要而且实用的功能。通过使用这些功能，我们可以更好地掌控自己的应用程序，并优化用户的交互体验。