使用vue3重构升级vue2项目流程与总结

目录

前言

1.Vue2 升级 Vue3 能带来什么？

1. 增加了代码的可维护性

2. 提升了页面渲染性能

3. 加强了 MVVM 双向数据绑定的效率

4. 项目可持续发展

升级存在的隐患

2.重构流程：

2.1新建项目，确定脚手架版本

2.2将vue2项目中的组件与封装的js文件整体迁移

2.3重构路由axios，sass,sass-loader等项目所需的依赖

2.4迁移登录与菜单组件，保证登录功能正常运行

2.5逐个页面迁移组件中的属性

3.重构过程中遇到的bug与问题

3.1无法使用绝对路径，只能使用相对路径

3.2 element-plus 版本更新带来的适配问题

---

前言

最近学习了vue3，收获颇丰。为了加强巩固，加深记忆与熟练，我决定把用vue2写的通用后台管理项目重构升级为vue3版本。

1.Vue2 升级 Vue3 能带来什么？

换言之，vue3到底有哪些优势？优点有哪些？

1. 增加了代码的可维护性

Vue2 使用的是 options 的API ，代码逻辑比较分散，可读性差，可维护性差。Vue3 使用的是 compositionAPI 逻辑分明，可维护性高，更友好的支持TS。在 template 模板中支持多个根节点，支持jsx语法。

2. 提升了页面渲染性能

Vue3 在更新DOM算法上，做了优化。在 Vue2 中,每次更新diff，都是全量对比，Vue3则只对比带有标记的，这样大大减少了非动态内容的对比消耗。

3. 加强了 MVVM 双向数据绑定的效率

Vue2 的双向数据绑定是利用 ES5 的 Object.definePropert() 对对象属性进行劫持，结合 发布订阅模式的方式来实现的。Vue3 中使用了 es6 的 ProxyAPI 对数据代理。
相比于vue2.x，使用proxy的优势如下：

defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x 可以检测到数组内部数据的变化

4. 项目可持续发展

升级存在的隐患

新的响应式系统用了 Proxy，会存在兼容性问题（不支持IE）。
框架底层进行了大量重构，新增和删除了很多原来的API，代码结构也发生了变化。很多地方需要进行破坏性修改，从而容易导致各种问题的出现。
项目使用到的第三方插件和 UI框架（Element）也需要替换和更改成 对应Vue3可用版本。

2.重构流程：

2.1新建项目，确定脚手架版本

2.1.1：第一种vue-cli：

安装并执行 npm init vue@latest

选择项目功能时：除了第一项的项目名字外，其他可以暂时no

切换到项目目录：cd

安装项目依赖：npm install

启动开发服务器：npm run dev

将应用发布到生产环境：npm run build

2.1.2：第二种vite：使用vite体验更快速

npm init vite-app

cd

npm install

npm run dev

2.2将vue2项目中的组件与封装的js文件整体迁移

2.3重构路由axios，sass,sass-loader等项目所需的依赖

        vue2项目中的element ui插件在vue3中升级为element-plus ui插件

        element-plus：npm i element-plus --save

//在main.js中引入

import ElementPlus from 'element-plus'

//国际版翻译      

import locale from '../node_modules/element-plus/es/locale/lang/zh-cn'

import 'element-plus/dist/index.css'

app.use(ElementPlus, { locale });

        axios： npm i axios

//在main.js中引入

import axios from 'axios'

app.config.globalProperties.$https = axios;

        vue-router  npm i vue-router@4

在main.js中引入

import router from './router'

app.use(router);

        在src下新建一个路由文件夹，文件夹下再新建index.js，配置路由信息

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    ...
]

let router = createRouter({
    history:createWebHistory(),
    routes
})

export default router;

        sass   npm i node-sass@6 sass-loader@10 sass -D 

        echarts   npm i echarts@4 -s

//在main.js中

import echarts from 'echarts'

app.config.globalProperties.$echarts = echarts;

2.4迁移登录与菜单组件，保证登录功能正常运行

2.5逐个页面迁移组件中的属性

将组件中的选项式写法的属性与变量删除，

在script标签中加入setup，

按需引入ref(),reactive()等函数，进行数据接收，

改写computed与自定义事件的格式，

将原本的生命周期名称进行修改，如下：

vue2	------->	vue3
beforeCreate	------->	setup(()=>{})
created	------->	setup(()=>{})
beforeMount	------->	onBeforeMount(()=>{})
mounted	------->	onMounted(()=>{})
beforeUpdate	------->	onBeforeUpdate(()=>{})
updated	------->	onUpdated(()=>{})
beforeDestroy	------->	onBeforeUnmount(()=>{})
destroyed	------->	onUnmounted(()=>{})
activated	------->	onActivated(()=>{})
deactivated	------->	onDeactivated(()=>{})
errorCaptured	------->	onErrorCaptured(()=>{})

        Vue2和Vue3钩子变化不大，主要是名称更改，另删除了beforeCreate 、created  两个钩子使用setup()钩子来替代。

3.重构过程中遇到的bug与问题

3.1无法使用绝对路径，只能使用相对路径

可以用../，也就相对路径来代替 

或者在vite中配置，如下

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

3.2 element-plus 版本更新带来的适配问题

3.2.1 Message更改为ElMessage

this.$message({ type: "success", message: res.data.message });
//更改后
ElMessage({ type: "success", message: res.data.message });

3.2.2 引用alert弹窗时需要引入ElMessageBox

export function delData(root, url, id, callFun) {
    root.$alert("你确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            root.service.delete(`${url}/${id}`).then((res) => {
                if (res.data.status === 200) {
                    callFun(root, url);
                    root.$message({ type: "success", message: res.data.message });
                }
            });
        },
    });
}

//更改后

import { ElMessageBox } from "element-plus";

export function delData(root, url, id, callFun) {
    ElMessageBox.alert("你确定要删除吗", "提示", {
        confirmButtonText: "确定",
        callback: () => {
            service.delete(`${url}/${id}`).then((res) => {
                if (res.data.status === 200) {
                    callFun(root, url)
                    ElMessage({ type: "success", message: res.data.message });
                }
            });
        },
    });
}

以上就是我在v2项目（后台管理系统）重构升级为v3项目时做出的总结与流程说明，希望对您有帮助~