前言

几天前咱们公布了《阿里妈妈又做了新工具，帮你把 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.jsconst eventHub = new Vue()export default eventHub
// ChildComponent.vueimport 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和$emitscriptAST.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. &dollar;.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

感谢您的浏览，祝你有美妙的一天！