Vue2升级Vue3 --- 第三方库变化（基于gogocode）
本次升级基于gogocode快捷转换gogocode升级体验，汇总的部分问题可能与gogocode有关，但仍可作为vue2升级vue3过程中报错问题的解决参考
第三方库变化
1.vue-contextmenujs(右键菜单)
// 原第三方库不支持vue3，更换为支持vue3的库"@imengyu/vue3-context-menu": "^1.0.8"
// 更换库后组件样式与以前不一致，如果要求还原样式的话需要进行自定义修改
// 项目内右键菜单原绑定在ant-design-vue的tabs组件上，如果不更改绑定位置会导致事件无法触发
import Contextmenu from 'vue-contextmenujs/dist/contextmenu.umd.js'
=> import Contextmenu from '@imengyu/vue3-context-menu'
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css' // 额外引入样式文件
2.@vue/composition-api(Vue2中使用Vue3语法)
- 原因：Vue3中已经支持，不需要引入，引入会报错
[vue-composition-api] No vue dependency found - 解决：修改引入
@vue/composition-api为vue
3.vxe-table(表格组件)
- 原因：当前版本不支持vue3
- 解决：升级版本为4.3.5
4.vuedraggable(拖拽组件)
- 原因：当前版本不支持vue3
- 主要变化：不支持多个根节点
- 版本：
^4.1.0 - 提示：由于元素结构发生变化，样式要还原也需要调整。以下为适配新版本拖拽组件的修改模板，可按照步骤一一替换，若需更详细的指引请自行找官方文档
/*
1.gogocode-cli修改v-model为v-model:value，此时需要手动还原
2.item-key可用于绑定list中单个元素element中的某个属性字段，用于替换原来v-for中的key值
3.tag="transition-group"用于替换原来的transition-group
4.:component-data="{tag: 'span'}"绑定原来的transition-group的属性字段
5.使用template取代原来的v-for渲染的方式，element与index为指定插槽属性，用于获取list中单个元素以及元素对应索引，index可用于原来的key值绑定
6.内部遍历的元素逐个替换成element
*/
<draggable
v-model="list"
item-key="id"
tag="transition-group"
:component-data="{tag: 'span'}"
>
<template #item="{element, index}">
<div :key="index">{{ element.text }}</div>
</template>
</draggable>
5.monaco变化
- 原因：编辑器实例为Vue3响应式数据时，更新编辑器内容会导致UI界面更新，堆栈溢出
- 解决方案1：将编辑器实例由Vue3响应式数据转变为普通变量，但原通过
vue实例访问编辑器实例会无法获取（若无需通过vue实例获取编辑器实例则可直接使用该方案） - 解决方案2：getValue、setValue等各种调用编辑器实例API时先通过
toRaw获取原始数据，避免响应性更新（该方案比较繁杂，目前暂不确定哪些API有此硬性需求，建议API调用时都先获取原始数据）
6.vue-router变化
- 问题：定义路由存在相同名称name在4.0版本中会忽略前面同名的路由
- 解决：同名路由给name字段赋不同的值
7.vue-loader变化
- 问题：
vue-loader版本必须为16.x 版本或更高版本 - 解决：增加
"vue-loader": "^16.0.0"并安装，然后调整vue-loader调用方法：const VueLoaderPlugin = require('vue-loader/lib/plugin') => const { VueLoaderPlugin } = require('vue-loader')