Vue2 代码自动转换为 Vue3 原理剖析—— eventHub篇

前言

几天前我们发布了《阿里妈妈又做了新工具，帮你把 Vue2 代码改成 Vue3 的》，这篇文章分享一下其中一个转换规则：eventHub（或称为eventBus）的转换的思路。

Vue 官方的迁移方案：https://v3.cn.vuejs.org/guide/migration/events-api.html

1. 先介绍下 eventHub

1.1 Vue2 的 eventHub

eventHub 是组件间共用的事件中心，在 Vue 中用来作为组件沟通的桥梁，向 eventHub 发送消息，其它模块通过订阅这个 eventHub 来获取相应的数据。

官网介绍：

Vue 实例可用于触发由事件触发 API 通过指令式方式添加的处理函数 ($on，$off 和 $once)。
event hub，用来创建在整个应用程序中可用的全局事件监听器的实现：

// eventHub.js
const eventHub = new Vue()
export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'

export default {
   
  mounted() {
   
    // 添加 eventHub 监听器
    eventHub.$on('custom-event', () => {
   
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
   
    // 移除 eventHub 监听器
    eventHub.$off('custom-event')
  }
}

1.2 Vue3中的 eventHub

然而在Vue 3中，官方移除$on、$off 和 $once 方法

我们从实例中完全移除了 $on、$off 和 $once 方法。$emit 仍然包含于现有的 API 中，因为它用于触发由父组件声明式添加的事件处理函数。
在