使用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无法使用绝对路径,只能使用相对路径

使用vue3重构升级vue2项目流程与总结_第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项目时做出的总结与流程说明,希望对您有帮助~

你可能感兴趣的:(vue3.0,重构,前端,javascript,vue.js)