纯手动vue2升级vue3

万般皆是命，半点不留人。

俗话说没过十五就是年，在这里给看到这篇文章的各位拜个晚年，大家过年好。

在这辞旧迎新的日子里我emo了，倒不是什么特别痛苦的事情，简短的叙述下事情的经过吧，去年年中因项目要求需要和“友商”部门共同开发一个项目，前期明确和本部门的领导沟通需要对方提供技术栈以及代码规范。结果...，我们用了vue2，而他们用了vue3，到这了其实和我都没有什么关系，结果年后开工第一天，人家要求我们将自己的代码集成到人家工程里面去，这个巨恶心的问题也不知道怎么就落到我的头，只知道那夜他们开了好久的会，在会前我给出了以下几套方案：

1. 使用微前端进行衔接；
2. 推翻之前工程进行代码重构；
3. 纯手动、强行迁移，修改不匹配部分；

最后在大佬一顿研讨后，最终选择了方案三，我emo了！

来吧！看看这个纯手动升级的过程中我们都遇到什么问题吧！

Failed to fetch dynamically

这个问题的原因可能以下几种：

• 路由配置的路径上找不到对应的文件；
• 文件内import的路径上找不到对应的文件；

Right-hand side of 'instanceof' is not an object

这个问题是我迁移公共组件以及子组件时发生了，原因是在接收父组件的props时，定义的ts类型，不是单一的类型；

props: {
    // bad 
    needToTop: { type: Boolean | null, default: true }
    // good
    needToTop: { type: Boolean, default: true }
}

新框架不支持vueJsx

@vitejs/plugin-vue-jsx是Vite官方提供的JSX支持插件，其内部使用了Vue官方提供的@vue/babel-plugin-jsx插件。
vitejs.dev的配置

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import vueJsx from '@vitejs/plugin-vue-jsx' 
// https://vitejs.dev/config/
export default defineConfig({ plugins: [vue(), vueJsx()], })

提示：安装的时候要关注下当前@vitejs/plugin-vue-jsx与vite的版本匹配问题。

幽灵函数

这个是问题是目前遇到问题中最奇葩的一个，我自己基于element-plus封装了一个upload组件，主要功能了是在上传你图片以后获取到返回值，然后暴露出去。

// 这是父组件中调用的代码，请记住这里的success函数
<el-form-item label="上传附件:" prop="fileList" v-if="dialogVisible">
  <upload
    :limit="1"
    :fileList="form.fileList"
    @remove="(fileList) => handleRemove('fileList', fileList)"
    @success="(response) => handleSuccess('fileList', response)"
  >
    <el-icon class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </upload>
</el-form-item>

// 这是子组件
<el-upload
  ref="upload"
  :action="imgUrl"
  :list-type="listType"
  v-model:file-list="files"
  :show-file-list="listType === 'picture-card'"
  :on-remove="(_, fileList) => handleRemove(fileList)"
  :on-success="(response)=> uploadSuccess(response)"
  :on-exceed="handleExceed"
>
  <slot></slot>
</el-upload>


const updateSuccess = (response) => {
   emit('success', response)
}

上面是父子组件的伪代码，可以看到父组件中传入的@success函数是需要子组件updateSuccess时触发的。

诡异的问题出现了，父组件的handleSuccess函数内是可以看到代码执行打印的log的，但是子组件的:on-success函数以及uploadSuccess函数并未执行。

查阅了一些资料，当前项目使用的element-plus版本为2.1.8，有人说在2.2.9之前，upload组件都存在on-success不触发的bug，但是也没说明为什么父组件的success诡异的执行了。

watch的无效问题

这个问题就比较直白了，父组件传进来的属性，用watch或者watchEffect均无效，但是打印其属性是可以看到属性是有变化的。

总结

有些问题还没解决完，迁移升级的项目也还在继续，新的问题我还会继续更新，未解决的问题也会想办法搞清楚。

其实手动升级也没什么技术含量，无非就是vue以及一些配套的生态有所变化，最难受的可能来自于一个或者一群神仙队友的暴击。

由此可见 沟通是多么的重要！多沟通吧朋友！😄