Vue2升级Vue3 --- gogocode工具使用体验

1.简介及使用

1. 简介：阿里妈妈开发的一个vue2代码转vue3代码的工具
2. 项目地址: https://github.com/thx/gogocode
3. 使用文档：https://gogocode.io/zh/docs/vue/vue2-to-vue3
4. 项目版本：v1.0.45
5. 使用流程：

npm install gogocode-cli -g  // 安装工具

gogocode -s ./src -t gogocode-plugin-vue -o ./src-out  // 升级代码

gogocode -s package.json -t gogocode-plugin-vue -o package.json  // 升级配置文件

npm install  // 安装升级

1.可能存在转化停顿情况，需要排查转换卡住的文件并暂时删除从而转化成功；
2.代码转换将根据gogocode内置的风格进行转换，可能改变原有代码的代码风格；
3.同时因为gogocode仍处于迭代过程中，不同版本会造成升级的效果有差异；

2.主要语法转换

语法转换	优点	缺陷
v-model	父组件绑定: v-model => v-model:value 子组件触发: input => update:value	-
生命周期	beforeDestroy => beforeUnmount destroyed => unmounted	-
\$listener	v-bind="\$listener" => v-bind="\$attrs"	-
事件API	生成代理文件代理事件API并引入 Bus.\$emit('') => \$emit(Bus,'')	子组件触发事件错误转换 this.\$emit('') => \$emit(this,'')
emit选项	子组件触发事件写入选项中	事件API事件也写入选项中
异步组件	() => import('') 转化 Vue.defineAsyncComponent(() => import(''))	仍需手动引入defineAsyncComponent 并去掉Vue
slot插槽	slot="name" => v-slot:name	slot-scope未转换

3.其他配置转换

• 启动文件index.js: 结合gogocode以及手动修改

// 创建Vue实例移动到头部
window.$vueApp = Vue.createApp(App)
window.$vueApp.use(router) // router在挂载之前，否则无法渲染
window.$vueApp.mount('#app')
window.$vueApp.use(store)

// 兼容就this.$http调用方法
// Vue2语法转化：Vue.use(v => { v.prototype.$http = axios })
window.$vueApp.config.globalProperties.$http = axios


window.$vueApp.use(less)
window.$vueApp.use(Antd)
window.$vueApp.use(Contextmenu)
window.$vueApp.component('draggable', draggable)

window.moment = moment

• router：结合gogocode以及手动修改

// 404页面路径调整
path: '*' => path: '/:catchAll(.*)'
// 与 2.x 不同，loader 函数不再接收 resolve 和 reject 参数
component: (resolve) => {
    require.ensure([], () => {
        return resolve(require('@views/login/Index.vue'))
    }, 'login')
}
=> 
component: () => import('@views/login/Index.vue'),

总结：
1.使用该工具能够减少一定的升级工作量，但是同时会产生其他一些未知的隐患，使用过程中需要对转换后的代码进行排查。目前针对大型项目还是优先手动升级
2.若不采用该工具进行一键转换，该工具有单独可取之处，比如：自动生成的事件API代理文件以及package.json变更等（该文件执行命令转换后仍有问题，将在vue3变更中进一步说明）