【vue-2】Vue 3 中的 v-on 指令：全面指南与最佳实践

在 Vue.js 中，v-on 指令是处理用户交互的核心工具之一。Vue 3 在事件处理方面保留了 v-on 的核心功能，同时引入了一些改进和新特性。本文将深入探讨 Vue 3 中的 v-on 指令，从基础用法到高级技巧，帮助开发者充分利用这一强大功能。

1. v-on 基础

1.1 基本语法

v-on 指令用于监听 DOM 事件并在触发时执行一些 JavaScript 代码。基本语法如下：

<button v-on:click="counter += 1">增加 1</button>

Vue 3 依然支持简写形式，用 @ 符号代替 v-on:：

<button @click="counter += 1">增加 1</button>

1.2 方法事件处理器

对于复杂的逻辑，通常使用方法作为事件处理器：

<button @click="greet">问候</button>

methods: {greet(event) {// `event` 是原生 DOM 事件alert('Hello!');console.log(event.target.tagName); // 输出 "BUTTON"}
}

2. Vue 3 中的新特性与改进

2.1 多个事件处理器

Vue 3 允许为一个事件绑定多个处理器：

<button @click="firstHandler(), secondHandler()">点击我</button>

2.2 事件修饰符的增强

Vue 3 保留了大多数 Vue 2 的事件修饰符，并做了一些改进：

2.2.1 常用修饰符

• .stop - 调用 event.stopPropagation()
• .prevent - 调用 event.preventDefault()
• .capture - 使用捕获模式添加事件监听器
• .self - 只有当事件是从侦听器绑定的元素本身触发时才触发回调
• .once - 只触发一次回调
• .passive - 以 { passive: true } 模式添加侦听器

2.2.2 Vue 3 新增/变化

• .left, .right, .middle 鼠标按钮修饰符现在更精确
• .exact 修饰符可以更精确地控制精确的系统修饰符组合触发

2.3 按键修饰符的变化

Vue 3 对按键修饰符进行了重大改进：

<!-- Vue 2 语法 (Vue 3 中仍然支持但不推荐) -->
<input @keyup.enter="submit" /><!-- Vue 3 推荐语法 -->
<input @keyup.enter="submit" /><!-- 使用按键的 key 值 -->
<input @keyup.page-down="onPageDown" />

Vue 3 不再支持按键码（keyCode），而是推荐使用 kebab-case 的按键名称。

2.3.1 常用按键别名

• .enter
• .tab
• .delete (捕获 “删除” 和 “退格” 键)
• .esc
• .space
• .up
• .down
• .left
• .right

2.4 系统修饰键

Vue 3 改进了系统修饰键（.ctrl, .alt, .shift, .meta）的行为：

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" /><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符允许精确控制：

<!-- 当且仅当按下 Ctrl 且未按下其他键时触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

3. 高级用法

3.1 内联处理器中的方法调用

可以直接在内联语句中调用方法并传递参数：

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>

如果需要访问原始 DOM 事件，可以使用特殊变量 $event：

<button @click="warn('Form cannot be submitted yet.', $event)">Submit
</button>

methods: {warn(message, event) {if (event) {event.preventDefault()}alert(message)}
}

3.2 自定义事件与组件通信

在组件上使用 v-on 可以监听子组件触发的自定义事件：

<blog-post @enlarge-text="postFontSize += 0.1"></blog-post>

子组件可以通过 emit 方法触发事件：

this.$emit('enlarge-text')

Vue 3 还引入了 emits 选项，可以声明组件会触发的事件：

app.component('blog-post', {props: ['title'],emits: ['enlarge-text'],template: `<div><h3>{{ title }}</h3><button @click="$emit('enlarge-text')">Enlarge text</button></div>`
})

3.3 与 v-model 的配合

Vue 3 中，v-model 实际上是 v-bind 和 v-on 的语法糖：

<custom-input:modelValue="searchText"@update:modelValue="searchText = $event"
></custom-input>

等价于：

<custom-input v-model="searchText"></custom-input>

3.4 事件总线模式的替代方案

虽然 Vue 3 移除了 $on, $off 和 $once 方法，但可以使用外部库（如 mitt）来实现事件总线模式：

import mitt from 'mitt'const emitter = mitt()// 触发事件
emitter.emit('foo', { a: 'b' })// 监听事件
emitter.on('foo', e => console.log('foo', e))// 清理
emitter.all.clear()

4. 性能优化与最佳实践

4.1 避免内联计算

避免在模板中进行复杂的计算：

<!-- 不推荐 -->
<button @click="doSomething(complexCalculation())">点击</button><!-- 推荐 -->
<button @click="preparedData = complexCalculation(); doSomething(preparedData)">点击</button>

4.2 合理使用修饰符

修饰符可以简化代码并提高可读性：

<!-- 不使用修饰符 -->
<form @submit="event.preventDefault(); submitForm()"></form><!-- 使用修饰符 -->
<form @submit.prevent="submitForm"></form>

4.3 事件委托

对于大量相似元素的相同事件处理，考虑使用事件委托：

<div @click="handleItemClick"><div data-id="1">Item 1</div><div data-id="2">Item 2</div><!-- 更多项目 -->
</div>

methods: {handleItemClick(event) {if (event.target.dataset.id) {// 处理点击}}
}

4.4 组件事件命名规范

自定义事件名推荐使用 kebab-case：

this.$emit('my-event')

<my-component @my-event="doSomething"></my-component>

5. 常见问题与解决方案

5.1 事件不触发的问题

• 检查事件名是否正确（区分大小写）
• 确保组件正确使用了 $emit
• 检查父组件是否正确监听了事件

5.2 事件参数传递

<!-- 传递多个参数 -->
<button @click="doSomething('hello', $event)">点击</button>

5.3 动态事件名

Vue 3 支持动态事件名：

<button @[dynamicEvent]="doSomething">点击</button>

data() {return {dynamicEvent: 'click'}
}

5.4 原生事件监听

要在组件上监听原生事件而不是自定义事件，可以使用 .native 修饰符的替代方案：

Vue 3 中，.native 修饰符已被移除，默认情况下，组件上的 v-on 只监听自定义事件。要监听原生事件，需要在子组件中使用 emits 显式声明或使用 $attrs：

<my-component @click="handleClick"></my-component>

子组件：

export default {emits: [], // 不声明 click 事件setup(props, { attrs }) {// click 事件将作为原生事件处理}
}

或者显式转发事件：

<!-- 子组件模板 -->
<button v-on="$attrs">Click me</button>

6. 总结

Vue 3 中的 v-on 指令在保留 Vue 2 核心功能的同时，通过一系列改进提供了更强大、更灵活的事件处理能力。理解并合理运用 v-on 的各种特性，可以显著提高 Vue 应用的交互性和可维护性。

关键要点：

• 熟悉基本语法和简写形式
• 掌握 Vue 3 中的新特性和变化
• 合理使用事件修饰符提高代码简洁性
• 遵循组件通信的最佳实践
• 注意性能优化和常见问题的解决方案

通过本文的学习，希望您能更加自信地在 Vue 3 项目中使用 v-on 指令，构建出更加交互丰富的应用程序。