Vue 3 键盘事件主要用 @keydown/@keyup 结合修饰符处理，推荐 @keyup 避免重复触发；支持 .enter、.ctrl.s 等按键修饰符精准匹配，.exact 控制组合键精度，.prevent/.stop 可阻止默认行为和冒泡。
Vue 3 处理键盘输入事件主要靠 @keydown、@keyup 和修饰符组合，核心是监听按键行为并响应逻辑，不依赖手动绑定原生 addEventListener。
基础键盘事件绑定方式
在模板中直接使用 @keydown 或 @keyup 绑定处理器即可：
-
@keydown在按键按下时触发（长按时会重复触发） -
@keyup在按键松开时触发（更常用于判断完整按键动作） - 推荐用
@keyup处理表单提交、快捷键等场景，避免重复触发干扰
示例：
<input @keyup="onKeyUp" placeholder="按任意键试试" />
脚本中定义处理函数：
立即学习“前端免费学习笔记（深入）”；
const onKeyUp = (event) => {<br> console.log('松开的键：', event.key); // 如 'Enter'、'a'、'ArrowUp'<br> console.log('是否按住 Ctrl：', event.ctrlKey);<br>};
用修饰符精准匹配快捷键
Vue 内置按键修饰符，可省去手动判断 event.key 和修饰键状态的冗余代码：
-
@keyup.enter—— 只响应 Enter 键松开 -
@keyup.ctrl.s—— 只响应 Ctrl+S 松开（注意顺序：修饰键在前，主键在后） -
@keyup.alt.period—— Alt+. 组合（.需写成period，也可直接用.字符，但推荐语义化写法） -
@keyup.exact.ctrl—— 仅按 Ctrl 键（无其他键同时按下）时触发
注意：.exact 对组合键精度控制很有用，比如避免 Ctrl+Shift+S 误触发 Ctrl+S 逻辑。
阻止默认行为与事件冒泡
某些快捷键会触发浏览器默认动作（如 Ctrl+S 弹出保存对话框），需主动拦截：
- 加
.prevent修饰符：@keyup.ctrl.s.prevent="saveData" - 或在方法内调用
event.preventDefault() - 若键盘事件绑定在嵌套容器上，又不希望父级监听器被触发，可加
.stop
例如：
<div @keydown.stop="handleGlobalKey"><br> <input @keyup.enter.prevent="submitForm" /><br></div>
这样回车提交不会冒泡到外层 div，也不会触发浏览器默认换行或表单提交。
全局快捷键监听技巧
不是所有元素都默认接收键盘事件，要监听全局快捷键，需确保目标元素可聚焦：
- 给容器加
tabindex="0"，使其能获得焦点并响应@keydown - 或者直接监听
document（需在onMounted中用addEventListener，并在onUnmounted清理） - 简单项目推荐用
<div @keydown="handleKey" tabindex="0">+ CSSoutline: none隐藏焦点框
小提示：避免在非输入类组件中滥用 tabindex，影响可访问性；生产环境复杂快捷键建议用 mousetrap 等成熟库管理。
