Vue 的事件机制允许组件之间进行通信，通过 $on、$off、$emit 和 $once 等方法进行事件的订阅、取消订阅、触发和一次性订阅。我们可以通过手写这些方法来理解其工作原理。

Vue 事件机制

1. $on(event, callback)：监听特定事件。
2. $off(event, callback)：停止监听特定事件。
3. $emit(event, ...args)：触发特定事件。
4. $once(event, callback)：只监听一次特定事件。

手写实现

下面是手写这些方法的简单实现：

复制
1class EventEmitter {
2  constructor() {
3    this.events = {};
4  }
5
6  // 监听事件
7  $on(event, callback) {
8    if (!this.events[event]) {
9      this.events[event] = [];
10    }
11    this.events[event].push(callback);
12  }
13
14  // 停止监听事件
15  $off(event, callback) {
16    if (!this.events[event]) return;
17
18    if (!callback) {
19      // 如果没有传递 callback，移除所有事件监听
20      this.events[event] = [];
21    } else {
22      // 移除特定的事件监听
23      this.events[event] = this.events[event].filter(cb => cb !== callback);
24    }
25  }
26
27  // 触发事件
28  $emit(event, ...args) {
29    if (this.events[event]) {
30      this.events[event].forEach(callback => callback.apply(this, args));
31    }
32  }
33
34  // 只监听一次事件
35  $once(event, callback) {
36    const wrapper = (...args) => {
37      callback.apply(this, args);
38      this.$off(event, wrapper);
39    };
40    this.$on(event, wrapper);
41  }
42}
43
44// 示例
45const eventBus = new EventEmitter();
46
47// 监听事件
48eventBus.$on('test', (msg) => console.log('test event:', msg));
49
50// 触发事件
51eventBus.$emit('test', 'Hello, World!');
52
53// 监听一次事件
54eventBus.$once('once', (msg) => console.log('once event:', msg));
55
56// 触发一次性事件
57eventBus.$emit('once', 'This should appear once');
58eventBus.$emit('once', 'This should not appear');
59
60// 停止监听事件
61eventBus.$off('test');
62
63// 触发事件（已经移除监听）
64eventBus.$emit('test', 'This should not appear');

解释

1. $on：将事件和回调函数添加到 events 对象中。
2. $off：如果没有传递回调函数，则移除所有监听。如果传递了回调函数，则只移除特定的回调。
3. $emit：触发事件，调用所有注册的回调函数并传递参数。
4. $once：使用一个包装函数 (wrapper) 包装原始回调函数，确保回调只执行一次，然后移除事件监听。