vue 3 中监听具体按键最简洁的方式是使用内置按键别名修饰符，如.enter、.tab、.delete等，直接写在@keydown或@keyup后；组合键需用原生事件手动判断。
Vue 3 中监听具体按键，最简洁的方式就是用内置的按键别名修饰符，直接写在 @keydown 或 @keyup 后面，不需要手动判断 event.key 或废弃的 keyCode。
常用按键别名怎么写
Vue 3 提供了 8 个常用按键的别名，全部以点号（.）开头，接在事件指令后面即可：
-
.enter→ 回车键（Enter） -
.tab→ Tab 键（注意：默认会跳焦点，加.prevent可阻止） -
.delete→ 同时捕获 Delete 和 Backspace 键 -
.esc→ Esc 键 -
.space→ 空格键（注意：@keydown.space在输入框中可能触发滚动，推荐用@keyup.space） -
.up/.down/.left/.right→ 方向键
多个按键别名可以一起用
比如想让 Tab、Enter、Delete 任意一个触发同一逻辑，直接连写：
<input>
这样按下其中任一键都会调用 handleAction 方法。注意：不是“同时按”，而是“任一满足”。
组合键（如 Ctrl+S）不能用别名，得用原生事件
Vue 的按键别名不支持修饰键（Ctrl、Alt、Meta、Shift）组合。要监听 Ctrl+S，需绑定原生 keydown 并手动判断：
在 mounted 钩子中添加全局监听：
this.unmount = window.addEventListener('keydown', (e) => {<br> if ((e.ctrlKey || e.metaKey) && e.key === 's') {<br> e.preventDefault();<br> this.save();<br> }<br>});
别忘了在 unmounted 中移除：this.unmount?.();
keydown 还是 keyup？关键看交互意图
@keydown 在按键按下瞬间触发，适合需要即时响应的场景（比如防重复提交）；@keyup 在按键抬起后触发，更适合获取完整输入（比如回车搜索，用户敲完回车才执行）。
常见搭配：
- 搜索框回车提交 → 推荐
@keyup.enter（避免输入中途误触） - 删除某条数据 →
@keyup.delete更自然（用户松开键才确认删除） - 快捷导航（方向键切换焦点）→
@keydown.up.down（响应更快）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
