挑战Vue3组件设计，$emit,$on,$off从0到1的代替方案：8月更文挑战

2024-01-19 15:53:10

在Vue3中,emit、on和$off等API已被弃用，这意味着开发者们需要寻找新的方式来监听组件自己的事件。虽然官方推荐使用第三方库来完成迁移，但这并不意味着没有其他的选择。本文将详细介绍一些替代方案，帮助大家从0到1地理解和使用这些新工具。

初探Vue3的事件系统

Vue3的事件系统与Vue2有很大不同。在Vue2中，开发者可以通过on、emit和$off来监听、触发和取消监听组件的事件。然而，在Vue3中，这些API已被弃用。官方推荐使用第三方库来完成迁移，但开发者们也可以选择使用内置的API。

内置API：addEventListener和removeEventListener

Vue3中，可以使用addEventListener和removeEventListener来监听和取消监听组件的事件。这与标准的DOM事件监听器非常相似。

// 监听事件
component.addEventListener('my-event', (event) => {
  // 处理事件
});

// 取消监听事件
component.removeEventListener('my-event', (event) => {
  // 处理事件
});

这种方法的好处是它与标准的DOM事件监听器非常相似，因此很容易学习和使用。然而，它的缺点是它只能监听组件自己的事件，而不能监听子组件的事件。

第三方库

还有一些第三方库可以用来监听Vue3组件的事件。其中最受欢迎的是mitt和eventemitter3。这些库提供了与Vue2中on、emit和$off类似的API，因此非常容易学习和使用。

// 使用mitt
import mitt from 'mitt';

const emitter = mitt();

// 监听事件
emitter.on('my-event', (event) => {
  // 处理事件
});

// 触发事件
emitter.emit('my-event', { message: 'Hello, world!' });

// 取消监听事件
emitter.off('my-event', (event) => {
  // 处理事件
});

// 使用eventemitter3
import EventEmitter3 from 'eventemitter3';

const emitter = new EventEmitter3();

// 监听事件
emitter.on('my-event', (event) => {
  // 处理事件
});

// 触发事件
emitter.emit('my-event', { message: 'Hello, world!' });

// 取消监听事件
emitter.off('my-event', (event) => {
  // 处理事件
});