Vue 基础面试题, Vue 项目中如何监听键盘事件?

QA

Step 1

Q:: Vue 项目中如何监听键盘事件？

A:: 在 Vue 中，可以通过 v-on 指令（或者简写 @）来监听键盘事件。例如，在一个输入框中监听 keyup 事件，可以使用 @keyup。还可以结合事件修饰符，例如 @keyup.enter 来监听特定的按键事件。代码示例如下：

 
<input @keyup.enter="submitForm">

这个代码的意思是在用户按下回车键时调用 submitForm 方法。

Step 2

Q:: 如何在 Vue 中实现全局的键盘事件监听？

A:: 可以在 Vue 的 mounted 生命周期钩子中通过 window.addEventListener 来监听键盘事件，并在组件销毁时移除监听。示例如下：

 
mounted() {
  window.addEventListener('keyup', this.handleKeyUp);
},
beforeDestroy() {
  window.removeEventListener('keyup', this.handleKeyUp);
},
methods: {
  handleKeyUp(event) {
    if (event.key === 'Escape') {
      this.closeModal();
    }
  }
}

Step 3

Q:: 如何在 Vue 中使用自定义指令来监听键盘事件？

A:: Vue 允许创建自定义指令来封装键盘事件的监听。示例如下：

 
Vue.directive('on-escape', {
  bind(el, binding) {
    el.handleKeyup = function(event) {
      if (event.key === 'Escape') {
        binding.value(event);
      }
    };
    document.addEventListener('keyup', el.handleKeyup);
  },
  unbind(el) {
    document.removeEventListener('keyup', el.handleKeyup);
  }
});

然后可以在模板中使用这个指令：

 
<div v-on-escape="closeModal"></div>

用途

在实际生产环境中，监听键盘事件可以用于提高用户体验，例如表单提交、快捷键操作、模态框的关闭等场景。键盘事件的处理是前端开发中非常常见的需求，特别是在构建高度交互的应用时。面试中考察这类问题，主要是为了了解候选人对用户交互的处理能力，以及如何优雅地在 Vue 中管理和解绑事件监听，从而避免内存泄漏等问题。\n

相关问题

🦆

如何在 Vue 中管理事件监听器的生命周期?▷

在 Vue 组件中，事件监听器通常在 mounted 钩子中添加，在 beforeDestroy 钩子中移除。这样可以确保监听器只在组件的生命周期内有效，避免了内存泄漏问题。

🦆

如何在 Vue 中处理组合键事件?▷

可以在键盘事件的回调中通过 event.ctrlKey、event.shiftKey 等属性来检测组合键。比如检测 Ctrl + S 可以这样实现：

 
methods: {
  handleKeyDown(event) {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      this.saveDocument();
    }
  }
}

🦆

Vue 中的事件修饰符有哪些?它们的作用是什么?▷

Vue 提供了一些常见的事件修饰符，如 .stop、.prevent、.capture、.self、.once 等。这些修饰符可以简化事件处理逻辑，例如 .prevent 用于调用 event.preventDefault()，.stop 用于调用 event.stopPropagation()。

🦆

如何使用 Vue 监听全局事件例如窗口大小改变?▷

可以在 Vue 的 mounted 钩子中添加 window.addEventListener 监听全局事件，并在 beforeDestroy 钩子中移除。全局事件监听常用于处理窗口大小调整、滚动事件等。

Vue 中是如何使用 event 对象的 Vue Router 如何配置 404 页面