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 中，因为它用于触发由父组件声明式添加的事件处理函数。
在 Vue 3 中，已经不可能使用这些 API 从组件内部监听组件自己发出的事件了，该用例暂没有迁移的方法。

2.迁移方案

2.1 eventHub 三方库的选择

Vue官方提供了替代的方案：使用第三方库，“eventHub 模式可以被替换为实现了事件触发器接口的外部库，例如 mitt 或 tiny-emitter”。研究了mitt 和 tiny-emitter，mitt 虽然 star 数更高，但是它不支持 $once 方法，需要使用其它方法组合实现。为了降低迁移成本，我选择使用 tiny-emitter。

A tiny (less than 1k) event emitter library.

2.2 迁移工具的选择

面对N多个项目，百八十个文件，各种 eventHub 的实现方式，手工替换肯定不是个可实现的解决方案。
更优方案是基于 AST（抽象语法树）解构代码，根据既定规则，批量修改然后输出文件。

在此推荐 GoGoCode 这个处理AST强力好入手的工具

GoGoCode提供了类似JQuery的API，用以操作AST对象。降低了使用AST的门槛，帮助开发者从繁琐的AST操作中解放出来

正是代码迁移的最有力助手。

另外安利一个做AST分析离不开的工具：https://astexplorer.net，使用它我们可以很方便的查看某段代码的AST语法树结构

3.代码迁移

3.1 写一个待转换的Demo

<template>
  <div>
    A:{{num}}
  </div>
</template>
<script>
import ehb from './EventHub';
export default {
  name: 'B',
  mounted() {
    // 添加 eventHub 监听器
    ehb.$on('inc', () => {
      this.num += 1;
    });
    // 添加 eventHub 监听器
    ehb.$once('inc', () => {
      this.num * 100;
    });
  },
  beforeUnmount() {
    ehb.$off('inc');
  },
};
</script>

3.2 需要做的事情

1. 定位script标签内的 $on $off $once $emit 方法，提取他们的对象名
2. 对象名，找到声明它的代码段
3. 用 tiny_emitter 对象覆盖掉之前 eventHub 提供的几个废弃方法
4. 加 tiny_emitter 引用
5. 文件输出

转换效果如下：

3.3 开工

安装 GoGoCode

npm install gogocode

初始化 Vue 文件的 AST 对象

// 读取文件内容为ast对象
let ast = $(`待转换vue文件的内容`,{ parseOptions: { language: 'vue' } })

// 定位ast对象的script节点
let scriptAST = ast.find('<script></script>') 

转换逻辑：实现“3.2需要做的事情”

// 1. 遍历script内容$on、$off、$once和$emit
scriptAST.find([`$_$1.$on($_$2)`, `$_$1.$off($_$2)`, `$_$1.$once($_$2)`, `$_$1.$emit($_$2)`]).each(hubAST => {
    // 1.1 使用hubAST.attr('callee.object.name')API,提取 ehb.$xxx(...) 的对象名
    if (hubAST.attr('callee.object.name')) {
        // 2. 找到eventHub声明位置
        let definitions = scriptAST.find(`import ${hubAST.attr('callee.object.name')} from '$_$'`)
        const eventHub = `Object.assign(${ hubAST.attr('callee.object.name') } ,{
          $on: (...args) => tiny_emitter.on(...args),
          $once: (...args) => tiny_emitter.once(...args),
          $off: (...args) => tiny_emitter.off(...args),
          $emit: (...args) => tiny_emitter.emit(...args),
          });
          `
        // 3. 遍历声明位置,用after API在声明之后覆盖之前的eventHub对象
        definitions.each(def => {
            if (!scriptAST.has(eventHub)) {
                def.after(eventHub)
            }
        })
    }
    // 4. 添加tiny_emitter的引用
    if (!scriptAST.has(`import tiny_emitter from 'tiny-emitter/instance'`)) {
        scriptAST.prepend(`import tiny_emitter from 'tiny-emitter/instance';\n`)
    }
})

最后输出AST对象为字符串：

return ast.generate()

具体实现代码： playground
​

4.最后总结下

这些代码用到 GoGoCode 实现的AST操作：

1. $.find API用来定位 $on $off $once $emit，输出AST对象
2. xxx.attr 用来提取AST对象的属性，例如这段代码里获取 ehb.$on( ...... ) 对象名 ehb
3. 使用 has API来判断AST中是否已经存在某个节点
4. xxx.after 向相应AST后添加一个AST对象
5. xxx.prepend 向相应AST前添加一个AST对象

都是很熟悉的操作有没有！

这里分享了一些eventHub转换实现的思路和GoGoCode的用法，希望能够得到大家的意见建议，如果发现了代码的问题，欢迎给我们提issue https://github.com/thx/gogocode/issues

感谢您的阅读，祝你有美好的一天！