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

本文链接：https://blog.youkuaiyun.com/lwx33912138/article/details/129065824

文章讲述了从Vue2升级到Vue3的好处，包括提高代码可维护性、提升页面渲染性能和数据绑定效率，并概述了重构过程，如组件迁移、依赖更新。同时，提到了升级中可能遇到的问题，如绝对路径限制和Element-plus的适配问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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

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

2.1.1：第一种vue-cli：

安装并执行 npm init vue@latest

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

切换到项目目录：cd <your-project-name>

安装项目依赖：npm install

启动开发服务器：npm run dev

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

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

npm init vite-app <project-name>

cd <your-project-name>

npm install

npm run dev