使用Vue3重构vue2项目

落日映苍穹つ 2022-12-16 15:25 416阅读 0赞

## 前言 ##

2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。

本篇文章就记录下重构vue2项目的过程，欢迎各位感兴趣的开发者阅读本文。

## 环境搭建 ##

本来打算使用`vite + vue3 + VueRouter + vuex + typescript`来构架项目的，但是经过一番折腾后发现`vite`目前只对vue支持，对于vue周边的一些库还没做到支持，没法在项目中使用。

最后，还是决定使用`Vue Cli 4.5`来构建了。

虽然vite目前还无法正常在项目中使用，但是我也折腾了一回，就记录下在折腾时的过程以及一些报错。

### 使用vite构建项目 ###

本文采用的包管理工具为`yarn`，将其升级至最新版本就可以正常创建vite项目了。

#### 初始化项目 ####

接下来，我们来看看具体步骤。

*  打开终端，进入你的项目目录，运行命令：`yarn crete vite-app vite-project`，该命令用于创建一个名为`vite-project`的项目。![format_png][]
 *  创建完成后，会得到如下所示的文件。![format_png 1][]
 *  进入创建好的项目，运行命令：`yarn install`，该命令会安装`package.json`中声明的依赖。![format_png 2][]
 *  我们使用`IDE`打开刚才创建的项目，整体项目如下所示，vite官方为我们提供了一个简单的demo。![format_png 3][]
 *  打开`package.json`查看启动命令在终端运行命令：`yarn run dev`或者点击`ide`的运行图标来启动项目。![format_png 4][]
 *  大功告成，浏览器访问 `http://localhost:3000/`，如下所示。![format_png 5][]

#### 集成Vue周边库 ####

我们将`Vue CLI`初始化的项目文件替换到用`vite`初始化的项目中去，然后修改`packge.json`中的相关依赖，然后重新安装依赖即可。

具体过程如下：

*  替换文件，替换后的项目目录如下所示。![format_png 6][]
 *  从`package.json`中提取我们需要的依赖，提取后的文件下。

{
      "name": "vite-project",
      "version": "0.1.0",
      "scripts": {
        "dev": "vite",
        "build": "vite build"
      },
      "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0-0",
        "vue-class-component": "^8.0.0-0",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"
      },
      "devDependencies": {
        "vite": "^1.0.0-rc.1",
        "@typescript-eslint/eslint-plugin": "^2.33.0",
        "@typescript-eslint/parser": "^2.33.0",
        "@vue/compiler-sfc": "^3.0.0-0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "@vue/eslint-config-typescript": "^5.0.2",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^7.0.0-0",
        "node-sass": "^4.12.0",
        "prettier": "^1.19.1",
        "sass-loader": "^8.0.2",
        "typescript": "~3.9.3"
      },
      "license": "MIT"
    }

![format_png 7][] 8abcc9f5b934568e54c0229c6663866c

*  启动项目，没报错，嘴角疯狂上扬。![format_png 8][]
 *  浏览器访问后，空白页面，打开`console`后，发现`main.js 404`![format_png 9][]

难搞，找不到`main.js`，那我把`main.ts`后缀改一下试试。将后缀改成`js`后，文件是不报错404了，但是又有了新的错误。![format_png 10][]

vite服务500和@别名无法识别，于是我打开ide的控制台看了错误，大概是scss的错，vite还没支持scss。![format_png 11][]

scss不支持，别名不识别，网上找了一圈也没找到解决方案，这些最基础的东西都无法被vite支持，那它就不能用在项目中了，于是我放弃了。

综合上述，`vite`要走的路还有很多，等它在社区成熟了，再将它应用到项目中吧。

### 使用Vue Cli构建项目 ###

由于`vite`的不合适，我们还是继续选择用`webpack`，此处我们选择用`Vue CLI 4.5`来创建项目。

#### 初始化项目 ####

*  在终端进入项目目录，执行命令：`vue create chat-system-vue3`该命令用于创建一个名为`chat-system-vue3`的项目。![format_png 12][]
 *  创建完成后，如下所示。![format_png 13][]
 *  用`IDE`打开项目，打开`package.json`文件，查看项目启动命令或者直接点编译器的运行按钮。![format_png 14][]
 *  OK，大功告成，打开浏览器，访问终端的内网地址。![format_png 15][]

#### 解决报错问题 ####

在浏览`CLI`默认创建的demo时，打开`main.js`文件发现其中`App.vue`文件报类型错误，无法推导出具体的类型。![format_png 16][]

一开始，我也懵逼，想起了Vue文档所说的，启用TypeScript必须要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 `defineComponent`。![format_png 17][]

App.vue文件代码如下：

<template>
      <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
      </div>
      <router-view />
    </template>
    
    <style lang="scss">
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    
    #nav {
      padding: 30px;
    
      a {
        font-weight: bold;
        color: #2c3e50;
    
        &.router-link-exact-active {
          color: #42b983;
        }
      }
    }
    </style>

观察代码后我们发现`CLI`生成的代码没有包含文档中所描述的代码，因此我们将其补充上，然后导出即可。

import { defineComponent } from "vue";
    const Component = defineComponent({
      // 已启用类型推断
    });
    export default Component;

加入上述代码后，我们的代码就不报错了。![format_png 18][]

根据官网描述，我们可以在`defineComponent`的包裹中写组件的逻辑代码，但是我看了CIL提供的demo的`Home`组件后发现，他的写法如下。

export default class Home extends Vue {}

在项目的`src`目录下有一个名为`shims-vue.d.ts`的文件，它声明了所有vue文件的返回类型，因此我们可以按照上述方法来写。该声明文件代码如下。

declare module "*.vue" {
      import { defineComponent } from "vue";
      const component: ReturnType<typeof defineComponent>;
      export default component;
    }

这样的写法看起来更符合TypeScript，不过这种写法写法只支持部分属性，同样的我们组件的逻辑代码写在类内部即可，那么将刚才`App.vue`文件中做的更改也应用到此处，如下所示。

`class`写法支持的属性如下图所示：

![format_png 19][] image-20201009210815033

#### 配置IDE ####

此处内容仅适用于`webstorm`，如果编辑器是其他的可跳过本部分。

我们在项目中集成了`eslint`和`prettier`，默认情况下`webstorm`是没有启用这两个东西的，需要我们自己手动开启。

*  打开webstorm的配置菜单，如下所示
    
    ![format_png 20][] image-20201006153458084
 *  搜索`eslint`，按照下图所示进行配置，配置完成后点`APPLY`、`OK`即可。
    
    ![format_png 21][] image-20201006153031544
 *  搜索`prettier`，按照下图所示进行配置，配置完成后点`APPLY`、`OK`即可。
    
    ![format_png 22][] image-20201006153654226

配置完上面的内容后，还有一个问题，在组件上用`v-if` `v-for`等vue指令时没有提示，这是因为webstorm没法正确读取`node_modules`包，按照下述操作即可解决这一问题。

![format_png 23][] image-20201006154114315

执行上述操作后，等待时间根据`cpu`性能而定，届时电脑会发热。这都是正常现象

![format_png 24][] image-20201006154306682

成功后，我们发现编辑器已经可以正常识别`v-`指令了，并且给了相应的提示。

![format_png 25][] image-20201006154454592

### 项目目录对比 ###

按照上述步骤，即可创建一个`vue3`的项目，接下来我们将需要重构的`vue2`项目的目录与上面创建的项目进行下目录对比。

*  如下所示，为`vue2.0`项目的目录
    
    ![format_png 26][] image-20201006162826706
 *  如下所示，为`vue3.0`项目的目录
    
    ![format_png 27][] image-20201006162936370

仔细观察后，我们发现在目录上并没有什么大的区别，只是多了`typescript`的配置文件和项目内使用ts的时辅助文件。

## 项目重构 ##

接下来，我们来一步步把vue2项目的文件迁移到vue3项目中，修改不合适的地方，让其适配vue3.0。

### 适配路由配置 ###

我们先从路由配置文件开始适配，打开vue3项目的`router/index.ts`文件，发现有一个报错，报错如下。

![format_png 28][] image-20201006215331894

错误信息是类型没被推导出来，我看了下面路由的写法后，盲猜它需要用函数返回，于是试了下，还真就是这样，正确的路由写法如下。

{
        path: "/",
        name: "Home",
        component: () => Home
      }

整体的路由配置文件代码如下：

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
    import Home from "../views/Home.vue";
    
    const routes: Array<RouteRecordRaw> = [
      {
        path: "/",
        name: "Home",
        component: () => Home
      },
      {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/About.vue")
      }
    ];
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    });
    
    export default router;

我们再来看看`vue2`项目中的路由配置，为了简单起见我摘抄了部分代码过来，如下所示。

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import MsgList from '../views/msg-list'
    import Login from "../views/login"
    import MainBody from '../components/main-body'
    Vue.use(VueRouter);
    
    const routes = [
        {
            path: '/',
            redirect: '/contents/message/message',
        },
        {
            name: 'contents',
            path: '/contents/:thisStatus',
            // 重定向到嵌套路由
            redirect: '/contents/:thisStatus/:thisStatus/',
            components: {
                mainArea: MainBody
            },
            props: {
                mainArea: true
            },
            children: [
                {
                    path: 'message',
                    components: {
                        msgList: MsgList
                    }
                }
            ],
        },
        {
            name: 'login',
            path: "/login",
            components: {
                login:Login
            }
        }
    ];
    
    const router = new VueRouter({
        // mode: 'history',
        routes,
    });
    
    export default router

经过观察后，它们的不同点如下：

*  `Vue.use(VueRouter)`这种写法被移除
 *  `new VueRouter({})`写法改为了`createRouter({})`
 *  hash模式和history模式声明由原先的`mode`选项变更为了`createWebHashHistory()`和`createWebHistory()`更加语义化了
 *  声明路由时多了ts的类型注解`Array<RouteRecordRaw>`

知道它们的区别后，我们就可以对路由进行适配和迁移了，迁移完成的路由配置文件：router/index.ts

> 这里有个小坑，路由懒加载的时候必须给他返回一个函数。例如：`component: () => import("../views/msg-list.vue")`。不然就会报黄色警告。

![format_png 29][] image-20201015223425458 ![format_png 30][] image-20201015223525227

### 适配Vuex配置 ###

接下来我们来看看两个版本在`vuex`使用上的区别，如下所示为`vue3`的vuex配置。

import { createStore } from "vuex";
    
    export default createStore({
      state: {},
      mutations: {},
      actions: {},
      modules: {}
    });

我们再来看看`vue2`项目中的vuex配置，为了简洁起见，我只列出了大体代码。

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
      },
      mutations: {
      },
      actions: {
      },
      modules: {
      }
    })

经过对比后，我们发现的不同点如下所示：

*  按需导入`import { createStore } from "vuex"`，移除了之前的整个导入`import Vuex from 'vuex'`
 *  移除了`Vue.use(Vuex)`的写法
 *  导出时丢弃之前的`new Vuex.Store`写法，改用了`createStore`写法。

知道上述不同点后，我们就可以对代码进行适配和迁移了，迁移完成的vuex配置文件：store/index.ts

> 如果需要在vue的原型上挂载东西，就不能使用以前的原型挂载方法，需要使用新方法`config.globalProperties`，详细用法请查阅官方文档。

我的项目中用到了一个websocket的插件，他需要在vuex中往Vue原型上挂载方法，下面是我的做法。

*  将`main.ts`中的`createApp`方法导出。
    
        import { createApp } from "vue";
        
        const app = createApp(App);
        
        export default app;
 *  在`store/index.ts`中导入`main.ts`，然后调用方法挂载即可。
    
          mutations: {
            // 连接打开
            SOCKET_ONOPEN(state, event) {
              main.config.globalProperties.$socket = event.currentTarget;
              state.socket.isConnected = true;
              // 连接成功时启动定时发送心跳消息，避免被服务器断开连接
              state.socket.heartBeatTimer = setInterval(() => {
                const message = "心跳消息";
                state.socket.isConnected &&
                  main.config.globalProperties.$socket.sendObj({
                    code: 200,
                    msg: message
                  });
              }, state.socket.heartBeatInterval);
            }
          }

### 适配axios ###

axios在封装成插件时与之前的差别对比如下：

*  暴露`install`方法由原来的`Plugin.install`改为了`install`
 *  增加了ts的类型声明
 *  `Object.defineProperties`舍弃了，现在直接使用`app.config.globalProperties`挂载即可

适配完成的代码如下：

import { App } from "vue";
    import axiosObj, { AxiosInstance, AxiosRequestConfig } from "axios";
    import store from "../store/index";
    
    const defaultConfig = {
      // baseURL在此处省略配置,考虑到项目可能由多人协作完成开发，域名也各不相同，此处通过对api的抽离，域名单独配置在base.js中
    
      // 请求超时时间
      timeout: 60 * 1000,
      // 跨域请求时是否需要凭证
      // withCredentials: true, // Check cross-site Access-Control
      heards: {
        get: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
          // 将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置
        },
        post: {
          "Content-Type": "application/json;charset=utf-8"
          // 将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置
        }
      }
    };
    
    /**
     * 请求失败后的错误统一处理，当然还有更多状态码判断，根据自己业务需求去扩展即可
     * @param status 请求失败的状态码
     * @param msg 错误信息
     */
    const errorHandle = (status: number, msg: string) => {
      // 状态码判断
      switch (status) {
        // 401: 未登录状态，跳转登录页
        case 401:
          // 跳转登录页
          break;
        // 403 token过期
        case 403:
          // 如果不需要自动刷新token，可以在这里移除本地存储中的token，跳转登录页
    
          break;
        // 404请求不存在
        case 404:
          // 提示资源不存在
          break;
        default:
          console.log(msg);
      }
    };
    
    export default {
      // 暴露安装方法
      install(app: App, config: AxiosRequestConfig = defaultConfig) {
        let _axios: AxiosInstance;
    
        // 创建实例
        _axios = axiosObj.create(config);
        // 请求拦截器
        _axios.interceptors.request.use(
          function(config) {
            // 从vuex里获取token
            const token = store.state.token;
            // 如果token存在就在请求头里添加
            token && (config.headers.token = token);
            return config;
          },
          function(error) {
            // Do something with request error
            error.data = {};
            error.data.msg = "服务器异常";
            return Promise.reject(error);
          }
        );
        // 响应拦截器
        _axios.interceptors.response.use(
          function(response) {
            // 清除本地存储中的token,如果需要刷新token，在这里通过旧的token跟服务器换新token，将新的token设置的vuex中
            if (response.data.code === 401) {
              localStorage.removeItem("token");
              // 页面刷新
              parent.location.reload();
            }
            // 只返回response中的data数据
            return response.data;
          },
          function(error) {
            if (error) {
              // 请求已发出，但不在2xx范围内
              errorHandle(error.status, error.data.msg);
              return Promise.reject(error);
            } else {
              // 断网
              return Promise.reject(error);
            }
          }
        );
        // 将axios挂载到vue的全局属性中
        app.config.globalProperties.$axios = _axios;
      }
    };

然后将其在main.js中`use`，就可以在代码中通过`this.$axios.xx`来使用了。

不过上述将axios挂载到vue上是多此一举的，因为我已经将api进行了抽离，在每个单独的api文件中都是通过导入我们封装好的axios的配置文件，然后用导入进来的axios实例来进行的接口封装。（ps: 之前由于自己太菜没注意到这个，傻傻的将其封装成了插件????）

那么，不需要将其封装成插件的话，那它就属于对axios进行配置封装了，我们将它放在config目录下，将上述代码稍作修改即可，修改好的代码地址：config/axios.ts。

最后在`main.ts`中将api挂载到全局属性。

import { createApp } from "vue";
    import api from "./api/index";
    const app = createApp(App);
    app.config.globalProperties.$api = api;

随后就就可以在业务代码中通过`this.$api.xx`按模块来调用我们抛出来的接口了。

#### shims-vue.d.ts类型声明文件 ####

shims-vue.d.ts是一个`Typescript`的声明文件，当项目启用ts后，有些文件是我们自己封装的，类型较为复杂，ts不能推导出其具体类型，此时就需要我们进行手动声明。

例如上面我们挂载到原型上的`$api`，它导出了一个类文件，此时类型就较为复杂了，`ts`没法推导出其类型，我们在使用时就会报错。

![format_png 31][] image-20201010100416381

要解决这个错误，我们就需要在`shims-vue.d.ts`中声明`api`的的类型

// 声明全局属性类型
    declare module "@vue/runtime-core" {
      interface ComponentCustomProperties<T> {
        $api: T;
      }
    }

> 注意：在`shims-vue.d.ts`文件中，类型声明超过1个时，组件内需要import包就不能在其内部进行，需要将其写在最外层，否则会报错。

![format_png 32][] image-20201010101906448

### 适配入口文件 ###

由于启用了`typescript`，入口文件由`main.js`变成了`main.ts`，文件中的写法与之前相比其不同点如下：

*  初始化挂载vue由原先的`new Vue(App)`改为了按需导入写法的`createApp(App)`
 *  使用插件时，也由原先的`Vue.use()`改成了，`createApp(App).use()`

在我的项目中引用了几个插件，需要在入口文件中做一些初始化的操作，插件还是2.x版本，没有ts的类型声明文件，因此导入时ts没法推导出它的类型，就得用`// @ts-ignore`让ts忽略它。

完整的入口文件地址：main.ts

### 适配组件 ###

基础设施完善后，接下来我们来适配组件，我们先来试试把2.x项目的所有组件搬过来看看，能不能直接启动。

结果可想而知，无法运行。因为我用了2.x的插件，vue3.0有关插件的封装，一些写法变了。我项目中总共引用了2个插件`v-viewer`、`vue-native-websocket`，`v-viewer`这个插件无解，他底层使用用到的`2.x`语法太多了，所以我选择放弃这个插件。`vue-native-websocket`这个插件就是使用的`Vue.prototype.xx`写法被舍弃了，用新的写法`Vue.config.globalProperties.xx`将其替换即可。

![format_png 33][] image-20201009174402912

替换完成后，重新编译即可，随后启动项目，如下所示，错误解决，项目成功启动。

![format_png 34][] image-20201009175415170

正如上图中所看到的，控制台有黄色警告，因为我们组件的代码还是使用的vue2.x的语法，我们要重新整理组件中的方法从而适配`vue3.0`。

> 注意：组件script标签声明lang="ts"后，就必须按照Vue官方文档所说使用`defineComponent`全局方法来定义组件。

#### 组件优化 ####

接下来，我们从`login.vue`组件开始重构，看看都做了哪些优化。

1.  创建`type`文件夹，文件夹内创建`ComponentDataType.ts`，将组件中用到的类型指定放在其中。
2.  创建`enum`文件夹，将组件中用到的枚举放在其中。

我们先来看看第一点，将组件内用到的类型进行统一管理，我们以登录组件为例，我们需要为`data`返回的对象指定其每个属性的类型，因此我们`ComponentDataType.ts`中创建一个名为`loginDataType`的类型，其代码如下。

export type loginDataType<T> = {
      loginUndo: T; // 禁止登录时的图标
      loginBtnNormal: T; // 登录时的按钮图标
      loginBtnHover: T; // 鼠标悬浮时的登录图标
      loginBtnDown: T; // 鼠标按下时的登录图标
      userName: string; // 用户名
      password: string; // 密码
      confirmPassword: string; // 注册时的确认登录密码
      isLoginStatus: number; // 登录状态：0.未登录 1.登录中 2.注册
      loginStatusEnum: Object; // 登录状态枚举
      isDefaultAvatar: boolean; // 头像是否为默认头像
      avatarSrc: T; // 头像地址
      loadText: string; // 加载层的文字
    };

声明好类型后，就可以在组件中使用了，代码如下：

import { loginDataType } from "@/type/ComponentDataType";
    export default defineComponent({
      data<T>(): loginDataType<T> {
        return {
          loginUndo: require("../assets/img/login/icon-enter-undo@2x.png"),
          loginBtnNormal: require("../assets/img/login/icon-enter-undo@2x.png"),
          loginBtnHover: require("../assets/img/login/icon-enter-hover@2x.png"),
          loginBtnDown: require("../assets/img/login/icon-enter-down@2x.png"),
          userName: "",
          password: "",
          confirmPassword: "",
          isLoginStatus: 0,
          loginStatusEnum: loginStatusEnum,
          isDefaultAvatar: true,
          avatarSrc: require("../assets/img/login/LoginWindow_BigDefaultHeadImage@2x.png"),
          loadText: "上传中"
        };
      }
    })

> 上述代码完整地址：

*  type/ComponentDataType.ts
 *  login.vue

再然后，我们看看第二点，使用enum来优化组件内部的条件判断，例如上面data中的isLoginStatus就有3种状态，我们要根据这三种状态来做不同的事情，如果直接用数字来代表三种状态直接赋值数字，后期维护时将是一件很痛苦的事情，如果用enum来定义的话，根据语意一眼就能看出它的状态是什么。

我们在enum文件夹中创建`ComponentEnum.ts`文件，组件内用到的所有枚举都会在此文件内定义，接下来在组件内创建`loginStatusEnum`，代码如下：

export enum loginStatusEnum {
      NOT_LOGGED_IN = 0, // 未登录
      LOGGING_IN = 1, // 登录中
      REGISTERED = 2 // 注册
    }

声明好后，我们就可以在组件中使用了，代码如下：

import { loginStatusEnum } from "@/enum/ComponentEnum";
    
    export default defineComponent({
      methods: {
        stateSwitching: function(status) {
          case "条件1":
           this.isLoginStatus = loginStatusEnum.LOGGING_IN;
           break;
          case "条件2":
           this.isLoginStatus = loginStatusEnum.NOT_LOGGED_IN;
           break;
        }
      }
    })

> 上述代码完整地址：

*  enum/ComponentEnum.ts
 *  login.vue

#### this指向 ####

在适配组件过程中，方法内部的this不能很好的识别，无奈就用了很笨的方法解决。

如下所示：

const _img = new Image();
    _img.src = base64;
    _img.onload = function() {
        const _canvas = document.createElement("canvas");
        const w = this.width / scale;
        const h = this.height / scale;
        _canvas.setAttribute("width", w + "");
        _canvas.setAttribute("height", h + "");
        _canvas.getContext("2d")?.drawImage(this, 0, 0, w, h);
        const base64 = _canvas.toDataURL("image/jpeg");
    }

`onload`方法内部的`this`应该是指向`_img`的，但是`ts`并不这么认为，报错如下所示。

![format_png 35][] image-20201013171520088

this对象中不包含`width`属性，解决方案就是讲this换成`_img`，问题解决。

![format_png 36][] image-20201013171712449

#### Dom对象类型定义 ####

当操作dom对象时，层级过时ts就无法推断出具体类型了，如下所示：

sendMessage: function(event: KeyboardEvent) {
          if (event.key === "Enter") {
            // 阻止编辑框默认生成div事件
            event.preventDefault();
            let msgText = "";
            // 获取输入框下的所有子元素
            const allNodes = event.target.childNodes;
            for (const item of allNodes) {
              // 判断当前元素是否为img元素
              if (item.nodeName === "IMG") {
                if (item.alt === "") {
                  // 是图片
                  let base64Img = item.src;
                  // 删除base64图片的前缀
                  base64Img = base64Img.replace(/^data:image\/\w+;base64,/, "");
                  //随机文件名
                  const fileName = new Date().getTime() + "chatImg" + ".jpeg";
                  //将base64转换成file
                  const imgFile = this.convertBase64UrlToImgFile(
                    base64Img,
                    fileName,
                    "image/jpeg"
                  );
                }
              }
            }
          }
    }

上面为一个发送消息的函数的部分代码，消息框中包含图片和文字，要对图片进行单独处理，我们需要要从`target`中拿到所有节点`childNodes`，然后遍历每个节点获取其类型，childNodes的类型为`NodeList`，那么他的每一个元素就是`Node`类型，如果当前遍历到的元素的`nodeName`属性是`IMG`时，它就是一个图片，我们就获取它的alt属性进一步判断，再获取src属性。

然而，ts会报错`alt`和`src`属性不存在，报错如下：

![format_png 37][] image-20201013172815950

此时，我们就需要把`item`断言成`HTMLImageElement`类型。

![format_png 38][] image-20201019110053258

#### 复杂类型定义 ####

在适配组件过程中，遇到一个比较复杂的数据类型定义，数据如下：

data(){
        return {
          friendsList: [
            {
              groupName: "我",
              totalPeople: 2,
              onlineUsers: 2,
              friendsData: [
                {
                  username: "神奇的程序员",
                  avatarSrc:
                    "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",
                  signature: "今天的努力只为未来",
                  onlineStatus: true,
                  userId: "c04618bab36146e3a9d3b411e7f9eb8f"
                },
                {
                  username: "admin",
                  avatarSrc:
                    "https://www.kaisir.cn/uploads/40ba319f75964c25a7370e3909d347c5admin.jpg",
                  signature: "",
                  onlineStatus: true,
                  userId: "32ee06c8380e479b9cd4097e170a6193"
                }
              ]
            },
            {
              groupName: "我的朋友",
              totalPeople: 0,
              onlineUsers: 0,
              friendsData: []
            },
            {
              groupName: "我的家人",
              totalPeople: 0,
              onlineUsers: 0,
              friendsData: []
            },
            {
              groupName: "我的同事",
              totalPeople: 0,
              onlineUsers: 0,
              friendsData: []
            }
          ]
        };
      },

一开始我是这样定义的。

![format_png 39][] image-20201014214430066

嵌套到一起，自认为没问题，放进代码后，报错长度不匹配，这样写知识给第一个对象定义了类型。

![format_png 40][] image-20201014214529652

经过一番求助后，他们说应该分开写，不能这样嵌套定义，正确写法如下：

*  类型分开定义
    
        // 联系人面板Data属性定义
        export type contactListDataType<V> = {
          friendsList: Array<V>;
        };
        
        // 联系人列表类型定义
        export type friendsListType<V> = {
          groupName: string; // 分组名称
          totalPeople: number; // 总人数
          onlineUsers: number; // 在线人数
          friendsData: Array<V>; // 好友列表
        };
        
        // 联系人类型定义
        export type friendsDataType = {
          username: string; // 昵称
          avatarSrc: string; // 头像地址
          signature: string; // 个性签名
          onlineStatus: boolean; // 在线状态
          userId: string; // 用户id
        };
 *  组件中使用
    
        import {
          contactListDataType,
          friendsListType,
          friendsDataType
        } from "@/type/ComponentDataType";
        
        data(): contactListDataType<friendsListType<friendsDataType>> {
            return {
              friendsList: [
                {
                  groupName: "我",
                  totalPeople: 2,
                  onlineUsers: 2,
                  friendsData: [
                    {
                      username: "神奇的程序员",
                      avatarSrc:
                        "https://www.kaisir.cn/uploads/1ece3749801d4d45933ba8b31403c685touxiang.jpeg",
                      signature: "今天的努力只为未来",
                      onlineStatus: true,
                      userId: "c04618bab36146e3a9d3b411e7f9eb8f"
                    },
                    {
                      username: "admin",
                      avatarSrc:
                        "https://www.kaisir.cn/uploads/40ba319f75964c25a7370e3909d347c5admin.jpg",
                      signature: "",
                      onlineStatus: true,
                      userId: "32ee06c8380e479b9cd4097e170a6193"
                    }
                  ]
                },
                {
                  groupName: "我的朋友",
                  totalPeople: 0,
                  onlineUsers: 0,
                  friendsData: []
                },
                {
                  groupName: "我的家人",
                  totalPeople: 0,
                  onlineUsers: 0,
                  friendsData: []
                },
                {
                  groupName: "我的同事",
                  totalPeople: 0,
                  onlineUsers: 0,
                  friendsData: []
                }
              ]
            };
          }

> 深刻的理解到了typescript泛型的使用，经验++????

#### tag属性被移除 ####

我们在使用`router-link`时，它默认会渲染成a标签，如果想让他渲染成其它自定义标签，可以通过`tag`属性来修改，如下所示：

<router-link :to="{ name: 'list' }" tag="div">

然而，在`vue-router`的新版本中，官方将event和tag属性移除了，因此我们就不能这么使用了，当然官方文档中也给了解决方案使用`v-solt`来作为替代方案，上述代码中我们希望将其渲染成div，用`v-solt`的写法如下所示：

<router-link :to="{ name: 'list' }" custom v-slot="{ navigate }">
        <div
          @click="navigate"
          @keypress.enter="navigate"
          role="link"
        >
      </div>
    </router-link>

> 有关这一块的更多讲解，请移步官方文档：removal-of-event-and-tag-props-in-router-link

#### 组件无法外链文件 ####

当我把页面当组件进行引入声明时，发现vue3不支持将逻辑代码外链，像下面这样，通过src外链。

在组件中引用。

<template>
       <message-display message-status="0" list-id="1892144211" />
    </template>
    
    <script>
    import messageDisplay from "@/components/message-display.vue";
    export default defineComponent({
      name: "msg-list",
      components: {
        messageDisplay
      },
    })
    </script>

然后，他就报错了，类型无法推断。

![format_png 41][] image-20201018224619607

尝试了很多方法，最后发现是不能通过src外链的问题，于是我把ts文件中的代码写在vue模版中报错就没了。

##### 必须使用as进行断言 #####

当我把代码搬到vue模版中后，它报了一些很奇怪的错误，如下所示`imgContent`变量可能存在多个类型，ts无法推断出具体类型，此时就需要我们自己进行断言给他指定类型，我用了尖括号的写法，他报错了，webstorm可能对vue3的适配不是很好，他的报错很奇怪，如下所示

![format_png 42][] image-20201018225114933

一开始，我看到这个错误我是一脸懵逼的，一个朋友告诉我用排除法，注释下距离它最近的代码，看看是否会报错，于是找到了问题根源，就是上面的类型断言的锅，将它修改后，问题解决。

![format_png 43][] image-20201018225618020

问题是解决了，但是我很是想不通为何一定要用as，尖括号跟他是同等的才对，于是我翻了官方文档。

![format_png 44][] image-20201018225919664

正如官方文档所说，启用`jsx`后就只能使用as语法了。可能vue3的模版语法默认是启用`jsx`的吧。

#### ref数组不会自动创建数组 ####

在vue2中，在`v-for`里使用ref属性时会用ref数组填充相应的`$refs`属性，如下所示为好友列表的部分代码，它通过循环`friendsList`，将`groupArrow`和`buddyList`放进ref数组中。

<template>
                <div class="group-panel">
                    <div class="title-panel">
                        <p class="title">好友</p>
                    </div>
                    <div class="row-panel" v-for="(item,index) in friendsList" :key="index">
                        <div class="main-content" @click="groupingStatus(index)">
                            <div class="icon-panel">
                                <img ref="groupArrow" src="../assets/img/list/tchat_his_arrow_right@2x.png" alt="左箭头"/>
                            </div>
                            <div class="name-panel">
                                <p>{
        {item.groupName}}</p>
                            </div>
                            <div class="quantity-panel">
                                <p>{
        {item.onlineUsers}}/{
        {item.totalPeople}}</p>
                            </div>
                        </div>
                        
                        <div class="buddy-panel" ref="buddyList" style="display:none">
                            <div class="item-panel" v-for="(list,index) in item.friendsData" :key="index" tabindex="0">
                                <div class="main-panel" @click="getBuddyInfo(list.userId)">
                                    <div class="head-img-panel">
                                        <img :src="list.avatarSrc" alt="用户头像">
                                    </div>
                                    <div class="nickname-panel">
                                        
                                        <div class="name-panel">
                                            {
        {list.username}}
                                        </div>
                                        
                                        <div class="signature-panel">
                                            [{
        {list.onlineStatus?"在线":"离线"}}]{
        {list.signature}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </template>

我们通过`$refs`可以访问到相应的节点，如下所示。

import lodash from 'lodash';
    export default {
       name: "contact-list",
       methods:{
            // 分组状态切换
            groupingStatus:function (index) {
                if(lodash.isEmpty(this.$route.params.userId)===false){
                    this.$router.push({name: "list"}).then();
                }
                // 获取transform的值
                let transformVal = this.$refs.groupArrow[index].style.transform;
                if(lodash.isEmpty(transformVal)===false){
                    // 截取rotate的值
                    transformVal = transformVal.substring(7,9);
                    // 判断是否展开
                    if (parseInt(transformVal)===90){
                        this.$refs.groupArrow[index].style.transform = "rotate(0deg)";
                        this.$refs.buddyList[index].style.display = "none";
                    }else{
                        this.$refs.groupArrow[index].style.transform = "rotate(90deg)";
                        this.$refs.buddyList[index].style.display = "block";
                    }
                }else{
                    // 第一次点击添加transform属性，旋转90度
                    this.$refs.groupArrow[index].style.transform = "rotate(90deg)";
                    this.$refs.buddyList[index].style.display = "block";
                }
            },
            // 获取列表好友信息
            getBuddyInfo:function (userId) {
                // 判断当前路由params与当前点击项的userId是否相等
                if(!lodash.isEqual(this.$route.params.userId,userId)){
                    this.$router.push({name: "dataPanel", params: {userId: userId}}).then();
                }
            }
        }
    }

上述写法在vue2没问题，但是在vue3中你得到的结果是报错，官方认为这种行为会变得不明确且效率低下，采用了新的语法来解决这个问题，通过ref来绑定一个函数去处理，如下所示。

<template>
    		
        <img :ref="setGroupArrow" src="../assets/img/list/tchat_his_arrow_right@2x.png" alt="左箭头" />
        
              <div class="buddy-panel" :ref="setGroupList" style="display:none">
    
            </div>
    </template>
    
    <script lang="ts">
    import _ from "lodash";
    import { defineComponent } from "vue";
    import {
      contactListDataType,
      friendsListType,
      friendsDataType
    } from "@/type/ComponentDataType";
    
    export default defineComponent({
      name: "contact-list",
      data(): contactListDataType<friendsListType<friendsDataType>> {
        return {  
            groupArrow: [],
            groupList: []
        }
      },
       // 设置分组箭头Dom
       setGroupArrow: function(el: Element) {
          this.groupArrow.push(el);
       },
       // 设置分组列表dom
       setGroupList: function(el: Element) {
          this.groupList.push(el);
       },
        // 列表状态切换
        groupingStatus: function(index: number) {
          if (!_.isEmpty(this.$route.params.userId)) {
            this.$router.push({ name: "list" }).then();
          }
          // 获取transform的值
          let transformVal = this.groupArrow[index].style.transform;
          if (!_.isEmpty(transformVal)) {
            // 截取rotate的值
            transformVal = transformVal.substring(7, 9);
            // 判断分组列表是否展开
            if (parseInt(transformVal) === 90) {
              this.groupArrow[index].style.transform = "rotate(0deg)";
              this.groupList[index].style.display = "none";
            } else {
              this.groupArrow[index].style.transform = "rotate(90deg)";
              this.groupList[index].style.display = "block";
            }
          } else {
            // 第一次点击添加transform属性，旋转90度
            this.groupArrow[index].style.transform = "rotate(90deg)";
            this.groupList[index].style.display = "block";
          }
        }
    )}

完整代码请移步：contact-list.vue

> ref更多描述请移步官方文档：v-for 中的 Ref 数组

## 项目地址 ##

至此，项目已经可以正常启动了，重构工作也结束了，接下来要解决的问题就是`vue-native-websocket`这个插件无法在vue3中工作的问题了。一开始我以为把它在原型行挂载的写法改动下就可以了，然而是我想的太简单了，改动后编辑器是不报错了，但是在运行时会报很多错。无奈只好先把与服务端交互这部分代码移除掉了。

接下来我会尝试重构`vue-native-websocket`这个插件，让其支持vue3。

最后放上本文重构好的项目代码地址：**chat-system**

## 关于奇舞周刊 ##

《奇舞周刊》是360公司专业前端团队「奇舞团」运营的前端技术社区。关注公众号后，直接发送链接到后台即可给我们投稿。

![format_png 45][]

[format_png]: /images/20221123/d7c97d83d43f41ff916c025adaa3aea4.png
[format_png 1]: /images/20221123/8ff3a4c1037a423a8a822ac10e0eff58.png
[format_png 2]: /images/20221123/73a06bda502741309da137a032785570.png
[format_png 3]: /images/20221123/1cd98571085e44cf8db312b0bcd4c060.png
[format_png 4]: /images/20221123/f697d5fcd8d846149b44b62566bc74dc.png
[format_png 5]: /images/20221123/37dc26322a034fc9979dea91fc76fbf7.png
[format_png 6]: /images/20221123/d5081023476c40efb5e3a816db91c069.png
[format_png 7]: /images/20221123/1ab9ea8fb0b340018cafcde75e3d0479.png
[format_png 8]: /images/20221123/63185ff521c74dd89ae6da40ae310d01.png
[format_png 9]: /images/20221123/9af01c1ce74a451eaeb37b349f90e46b.png
[format_png 10]: /images/20221123/34bb69807e544baca094c788bbc2218d.png
[format_png 11]: /images/20221123/c1dcecd0cc8f44609d3741e6ea4b5aa3.png
[format_png 12]: /images/20221123/bc2671d56998404e8a83c152e588d79b.png
[format_png 13]: /images/20221123/9db3283954e34b0cbd801697a3add4ce.png
[format_png 14]: /images/20221123/7b848d5bac7a44468296f3d4cdb7e0fb.png
[format_png 15]: /images/20221123/15003caaed5b487fb67daed40547ace8.png
[format_png 16]: /images/20221123/6171a450ecb34dadb866bb9d13992880.png
[format_png 17]: /images/20221123/1e19f316aab148cda63487e06e7a2144.png
[format_png 18]: /images/20221123/47d47e8db8f042298cd2377ea2659296.png
[format_png 19]: /images/20221123/095764458f6f40919cd4754d0497579c.png
[format_png 20]: /images/20221123/7f294a01209f4d5188a8eb06ae1a3553.png
[format_png 21]: /images/20221123/2fbe4576a35a465e86fe11eece461219.png
[format_png 22]: /images/20221123/d39e0f833f5e43e2a37b345aa3f4881d.png
[format_png 23]: /images/20221123/ba919d9f0057443f9b1c602ddc4c9f5d.png
[format_png 24]: /images/20221123/453bf28e11a0434bbdbd0795a749179c.png
[format_png 25]: /images/20221123/604d2e2000684cc088b2c854a4ccd122.png
[format_png 26]: /images/20221123/012c25e9358f48cc9e71118575d211f7.png
[format_png 27]: /images/20221123/e730d110446b442492b8d35be6cea636.png
[format_png 28]: /images/20221123/2288ce667712412bbf32844a17bb6a2a.png
[format_png 29]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9KVmliM2JidmNRT3FhSVc1dXBlU1BtZU1yNmlhVHlKRm9xcGpqU1llZEFxdHFiVjNWTHYxRWZpYzZmMktDUWcwa1VpY2g2ekY4aG5md0ZlMUFRNWZsbmpFSncvNjQw?x-oss-process=image/format,png
[format_png 30]: /images/20221123/d784a0a161334b39a13861da892ecd50.png
[format_png 31]: /images/20221123/1ddd6755c14e43b2aeb0d2c50758e1ef.png
[format_png 32]: /images/20221123/45cfacaaf98044c880612be3f6b609ca.png
[format_png 33]: /images/20221123/d0298f3cc2f54190aaf199fae0d76ee4.png
[format_png 34]: /images/20221123/2752a92c496a47a180a5a029706ab395.png
[format_png 35]: /images/20221123/57a651cec24a44c6b107561406866949.png
[format_png 36]: /images/20221123/6b6ffa4296654abfa697406fb378e03a.png
[format_png 37]: /images/20221123/d297a41144d848b7b499a0f18f2b7a83.png
[format_png 38]: /images/20221123/59b34cb467dd4d1bb360c3745b625a52.png
[format_png 39]: /images/20221123/d3ee7e4a53f64248bb0740c2522a637f.png
[format_png 40]: /images/20221123/978f4410cd564b9e87bcbe7b7b6eead8.png
[format_png 41]: /images/20221123/16a181dfeafb4d0fbb8ae3fe52272e15.png
[format_png 42]: /images/20221123/68ba2e465e334d67a6fdfd4f9ed5441d.png
[format_png 43]: /images/20221123/b4f39743851f4cee8d845f57c02e1969.png
[format_png 44]: /images/20221123/91f1bd3053ca4707bdf127f97f9e2ee8.png
[format_png 45]: /images/20221123/e96309fcf01e464cb3683f75335ec416.png