11.3.2 监听原生事件-Vue.js从入门到精通(三)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(三)

### 11.3.2 监听原生事件

在Vue.js的开发过程中，事件处理是构建交互性界面的基石。Vue提供了一套声明式的事件处理系统，允许我们以简洁的方式监听DOM元素上的事件，并在事件触发时执行JavaScript代码。然而，在某些情况下，我们可能需要直接监听DOM元素上的原生事件，而不是Vue组件上封装过的事件。这种情况下，Vue提供了一些特殊的方法和选项来帮助我们实现这一需求。本章将深入探讨如何在Vue.js中监听原生事件，包括其应用场景、具体实现方式以及最佳实践。

#### 一、为什么需要监听原生事件

首先，我们需要明确在什么情况下会需要监听原生事件。通常，Vue组件会为我们封装好事件处理逻辑，使得我们可以很方便地在组件内部监听和处理事件。然而，在某些特定场景下，直接使用Vue封装的事件可能不够灵活或者无法满足需求，比如：

1. **第三方库集成**：当我们在Vue项目中集成第三方UI库或JavaScript库时，这些库可能会在其DOM元素上触发原生事件，而这些事件可能没有被Vue组件直接封装。
2. **避免事件冒泡或捕获问题**：Vue的事件监听通常基于组件的根元素，而有时我们需要精确控制事件的监听位置，比如阻止事件冒泡或只在特定子元素上监听事件。
3. **性能优化**：在某些性能敏感的应用中，精确控制事件监听器可以减少不必要的DOM操作，提高应用性能。

#### 二、监听原生事件的方法

Vue提供了几种方式来监听原生事件，具体使用哪种方式取决于你的具体需求和Vue的版本（尤其是Vue 2和Vue 3之间有所差异）。

##### 1. 使用`.native`修饰符（Vue 2特有）

在Vue 2中，`.native`修饰符被用来监听组件根元素的原生事件。然而，需要注意的是，在Vue 3中，`.native`修饰符已经被废弃，因为Vue 3的组件模型发生了变化，组件的根元素默认就是原生DOM元素。

```html

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

methods: {
  handleClick() {
    console.log('原生点击事件被触发');
  }
}
```

在Vue 3中，如果`my-component`的根元素是原生DOM元素，那么直接监听`click`事件即可，无需`.native`修饰符。

##### 2. 使用`v-on`的`.native`替代方案（Vue 3）

虽然Vue 3不再支持`.native`修饰符，但你可以通过监听子组件的自定义事件或使用`$refs`直接访问DOM元素来监听原生事件。

- **监听自定义事件**：如果子组件触发了自定义事件来代表原生事件，你可以在父组件中监听这个自定义事件。
- **使用`$refs`**：为子组件或DOM元素设置`ref`，然后通过`this.$refs`访问该元素，并使用原生JavaScript方法添加事件监听器。

```html

<my-component ref="myComponentRef"></my-component>

mounted() {
  this.$refs.myComponentRef.$el.addEventListener('click', this.handleClick);
},
beforeUnmount() {
  this.$refs.myComponentRef.$el.removeEventListener('click', this.handleClick);
},
methods: {
  handleClick(event) {
    console.log('原生点击事件被触发', event);
  }
}
```

注意：直接操作DOM元素和事件监听器可能破坏Vue的响应式系统和组件的封装性，应谨慎使用。

##### 3. 使用`.self`修饰符

虽然`.self`修饰符不直接用于监听原生事件，但它可以帮助我们控制事件冒泡，从而在某些情况下达到类似监听原生事件的效果。`.self`修饰符只会触发当前元素上的事件监听器，如果事件是从子元素冒泡上来的，则不会触发。

```html
<div @click.self="handleClick">
  
  <button>点击我</button>
</div>
```

#### 三、最佳实践

1. **避免过度使用`$refs`**：虽然`$refs`提供了直接访问DOM元素的能力，但过度使用会破坏Vue的声明式编程范式，增加代码耦合度。尽量通过Vue的响应式系统和组件通信来解决问题。

2. **利用Vue组件的自定义事件**：当需要在组件间传递事件时，优先考虑使用Vue的自定义事件系统。这不仅可以保持代码的清晰和可维护性，还能更好地利用Vue的响应式特性。

3. **注意事件监听器的清理**：在Vue组件中，如果你手动添加了事件监听器（如使用`addEventListener`），请确保在组件销毁前清理这些监听器，以避免内存泄漏。

4. **理解事件冒泡和捕获**：在处理事件时，理解事件冒泡和捕获的机制非常重要。这有助于你更精确地控制事件的传播路径，从而避免不必要的事件触发和性能问题。

5. **考虑使用事件修饰符**：Vue提供了一系列事件修饰符（如`.stop`、`.prevent`、`.capture`等），它们可以帮助你更简洁地处理DOM事件，减少JavaScript代码量。

#### 四、总结

监听原生事件是Vue.js开发中不可或缺的一部分，尤其是在处理第三方库集成、精确控制事件传播路径或进行性能优化时。通过合理使用Vue提供的方法（如`.native`修饰符的替代方案、`$refs`、事件修饰符等）和遵循最佳实践，我们可以高效且安全地在Vue.js项目中监听和处理原生事件。然而，也需要注意不要过度依赖直接操作DOM和事件监听器，以免破坏Vue的组件化和响应式特性。

该分类下的相关小册推荐：

Vue.js从入门到精通(四)

Vue.js从入门到精通(一)

TypeScript和Vue从入门到精通(三)

Vue3技术解密

TypeScript和Vue从入门到精通(二)

Vue源码完全解析

VUE组件基础与实战

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(五)

vuejs组件实例与底层原理精讲

Vue原理与源码解析

TypeScript和Vue从入门到精通(一)