在一个基于 Vue 框架开发的项目中，你通常会采用哪些方式来监听用户的键盘操作？请结合实际经验说明具体实现步骤。
考察说明
考察对 Vue 事件处理机制的掌握程度，以及能否区分原生 DOM 事件与 Vue 修饰符的作用范围。
回答思路
- 【回答框架 1】在 Vue 中监听键盘事件的核心是使用 v-on 指令（简写为 @），通过 @keydown、@keyup 等事件绑定在目标元素上。例如在输入框上监听回车键可按 @keyup.enter 触发对应处理函数，这是最常见的使用方式。
- 【回答框架 2】除了直接在模板中绑定，还可以结合键盘事件修饰符，如 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right，以及系统修饰键 .ctrl、.alt、.shift、.meta。修饰符使得代码更简洁，且只在特定按键触发时执行逻辑，避免手动判断 event.keyCode 的繁琐。
- 【回答框架 3】若需要在全局范围内监听键盘事件，例如监听整个页面的快捷键，可以在 mounted 钩子中使用 window.addEventListener('keydown', handler) 注册监听，并在 beforeDestroy 或 unmounted 钩子中移除，防止内存泄漏。注意在 Vue 3 中生命周期函数名称有所变化，且组件卸载后需清理事件。
- 【回答框架 4】对于复杂的按键组合，可使用全局事件总线或 Vuex 来触发逻辑，但更推荐将监听逻辑封装为自定义指令，例如 v-keyboard 指令，统一管理按键映射与事件绑定，提升代码复用性和可维护性。
- 【回答框架 5】总结来说，Vue 监听键盘事件有两种主要方式：模板内联绑定适用于局部元素，原生事件监听适用于全局场景。选择时需根据作用范围和复用需求，同时注意修饰符对默认行为的阻止，如 .prevent 与 .stop 的组合使用。
- 【关键点 1】模板中使用 @keyup 和 @keydown 绑定事件，修饰符 .enter 等可简化按键判断。
- 【关键点 2】全局监听需在 mounted 中添加 window 事件，并在 beforeDestroy 中移除以防内存泄漏。
- 【关键点 3】Vue 3 中生命周期钩子名称改变，事件清理逻辑不可遗漏。
- 【关键点 4】复杂场景可封装为自定义指令，实现按键管理的复用。
- 【关键点 5】修饰符 .prevent 可阻止默认行为，如表单提交或滚轮事件。
- 【易错点 1】在模板中使用内联监听无法直接访问原生 event，需要在方法中接收参数，但修饰符已覆盖常见按键需求。
- 【易错点 2】全局监听时若忘记移除事件，会导致组件销毁后仍触发逻辑，尤其是在单页应用中可能引发状态错误。
- 【易错点 3】对于组合快捷键，如 Ctrl+S，需在方法中手动检查 event.ctrlKey 和 event.key，不能依赖单一修饰符，且浏览器默认行为可能干扰。