Vue2 大型项目升级 Vue3 详细经验总结
前言
前段时间,公司准备在现有的 Vue2 项目中做一个聊天系统,但考虑开发聊天系统的周期并不短,客户又急需。于是准备对接腾讯的 IM 组件,来实现。
不知道的这里贴个官网: IM TUIKit 官方文档
对于 TUIKit,官方文档上有以下要求:
然而我们公司项目是使用 Vue2 版本的,这显然不符合要求。如果要对接,那么必然要升级项目为Vue3 版本。
思考
首先要明白,Vue2 升级 Vue3 能带来什么?
可以参看一下这篇博客:
应不应该从 Vue 2 升级到 Vue 3
总结一下下列几点:
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. 项目可持续发展
Vue 2官方还会再维护两年,但两年后的问题和需求,官方就不承诺修复和提供解答了,Vue 3 则不会。
当然,还有其他的,这里只是列出几个主要的。
升级存在的隐患
- 新的响应式系统用了 Proxy,会存在兼容性问题(不支持IE)。
- 框架底层进行了大量重构,新增和删除了很多原来的API,代码结构也发生了变化。很多地方需要进行破坏性修改,从而容易导致各种问题的出现。
- 项目使用到的第三方插件和 UI框架(Element)也需要替换和更改成 对应Vue3可用版本。
升级方式
通过工具+手动升级
思路:
第一版可以先从基础进行迁移。完成框架整体升级到Vue3(可运行)之后可以进行细化。
步骤:
第一步: 先把Vue2 框架整体替换成 Vue3,因为目前 Vue3也是兼容了 Options 写法,这样代码结构可以先不用更改,后期可以逐步修改(因为涉及到所有页面和组件)。之后新增的页面和组件按照 Vue3 新增的 compositionAPI 结构来写。
第二步: 把 Vue3 中已经不再支持的 API 和语法进行修改替换。包括 Vue3 已经不再支持过滤器filter,v-model 用法也改变等。
第三步: 把项目使用到的第三方插件和UI框架(Element)替换成Vue3版本,对应用法可能也需要修改。需要通过 package.json 里注册目录,在页面进行检索修改。
对于这一步升级有以下几点比较麻烦:
- 项目中依赖的库并不支持vue3
- vue2到vue3的一些破坏性更改
- 项目中依赖组件库(ElementUI等)的破坏性更改
- 对一些新特性的尝试(vite,ts,pinia)等 公司项目迁移造成稳定性破坏(极其重要)
第四步: 确保项目代码语法编译无误后,需要检查代码中的业务是否正确,避免对公司项目迁移造成稳定性破坏(极其重要)。
第五步: 使用 TypeScript 重构 JS 代码,TypeScript 比 JavaScript 多了静态类型检查,也增加了一些新的语法,是给项目锦上添花。但是这一步会比较耗时(因为相当于修改把JS代码都要过一遍),但是项目中可以同时存在JS 和 TS,所以可以逐步替换。
使用自动化工具:
通过使用目前比较好用的开源工具可以完成第一步和第二步的转换,目前使用比较多的就是 gogocode
:文档
对于工具改造代码,存在很多未知性,项目业务代码中有些比较复杂的(例如表单联动,规则校验等等)可能会对原来的逻辑有影响,需要逐一人工比对和测试。
实施
1. 创建一个新的 vue3 + TS 项目,里面安装完相关基础依赖
整个项目重新搭建,使用了 Vue3 作为技术框架。使用了 Vite 作为打包和构建工具(代替了之前 Vue2 的 Webpack 构建工具),因为 Vite 拥有更好的打包编译性能。
增加了 TypeScript 依赖,可以作为 TS 代码编写编译,增强了项目可持续维护性(之后可转成全TS)。使用 VueRouter 4.1.1 版本作为项目页面路由控制,此版本为 Vue3 配套版本。使用了 Pinia 代替了 Vuex 作为统一状态管理模块,因为 Pinia 与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持。Api请求模块仍然采用了易用、简洁且高效的http库 Axios。使用 Sass 作为 CSS 的预编译语言,增强 CSS 的灵活性。使用升级版 Element Plus 作为界面 UI 框架。
技术栈
Vue3
项目使用的是 Vue ^3.2.36 版本。
Vue3 官网及其介绍:https://v3.cn.vuejs.org/guide/introduction.html
TypeScript
TypeScript 官网文档:https://www.tslang.cn/
VueRouter
VueRouter 官网及其介绍: https://router.vuejs.org/zh/
Pinia
Pinia 官网及其介绍:https://pinia.web3doc.top/
Axios
Axios 官网及其介绍:http://www.axios-js.com/
Sass
Sass 官网及其介绍:https://www.sass.hk/
Element Plus
Element Plus 官网及其介绍:https://element-plus.gitee.io/zh-CN/guide/design.html
代码规范
使用 EditorConfig + Prettier + ESLint 组合来实现代码规范化。
这样做带来好处:
- 解决团队之间代码不规范导致的可读性差和可维护性差的问题。
- 解决团队成员不同编辑器导致的编码规范不统一问题。
- 提前发现代码风格问题,给出对应规范提示,及时修复。 减少代码审查过程中反反复复的修改过程,节约时间。
- 自动格式化,统一编码风格,从此和脏乱差的代码说再见。
VSCode 编辑器 需要去插件市场下载插件 EditorConfig for VS Code 、Prettier - Code formatter、ESLint。
JetBrains 系列(WebStorm、IntelliJ IDEA 等)则不用额外安装插件,可直接使用 EditorConfig 配置。
构建工具
Vite
项目使用的是 Vite ^2.9.9 版本。
Vite 官网及其介绍 : https://vitejs.cn/
运行要求
Vue 版本:3.0以上
node 版本:Vite 需要 Node.js 版本 >= 12.0.0
浏览器:非IE浏览器
项目目录结构
src
│ App.vue 项目根节点
│ env.d.ts 类型声明文件
│ main.ts 项目入口文件
│
├─api 项目请求封装复用统一管理目录
│ │ index.js
│ └─request 请求封装存放目录
│ │
│ └─modules 项目请求模块目录
│
├─assets 项目静态资源目录
│ ├─css CSS 存放目录
│ │
│ ├─iconfont 字体文件存放目录
│ │
│ ├─images 图片存放目录
│ │
│ └─js 第三方JS库存放目录
│
├─common 项目通用文件存放目录
│ ├─enums 通用枚举存放目录
│ ├─keysManage 通用Key管理目录
│ │ localKeys.ts
│ │ sessionKeys.ts
│ │
│ └─style sass 预编译通用样式存放目录
├─components 公共组件存放目录
│ │
│ ├─base 基础组件存放目录
│ │
│ ├─business 业务组件存放目录
│ │
│ ├─function 功能组件存放目录
│ │
│ └─template 模板组件存放目录
│
├─config 项目通用配置文件目录
│ index.dev.js
│ index.exportdata.js
│ index.js
│ index.prod.js
│ index.uat.js
│
├─router 项目路由存放目录
│ │ index.ts
│ │
│ └─modules 路由模块化目录
├─store 公共状态管理存放目录
│ │ index.js
│ │
│ └─modules 公共状态管理模块化
│ login.js
├─ws WebSocket 模块目录
│
├─mixins 公共提取方法目录
│
├─h5 移动端页面(多入口)
│
├─util 通用工具函数存放目录
└─views 项目页面存放目录├─modules 页面模块化目录└─other
关于语法和Api的改变可以参见Vue官方文档:Vue2 迁移
全局 API
- 全局 Vue API 已更改为使用应用程序实例
- 全局和内部 API 已经被重构为支持 tree-shake
模板指令
- 组件上 v-model 用法已更改,以替换 v-bind.sync
<template v-for>
和非 v-for 节点上的 key用法已更改- 在同一元素上使用的 v-if 和 v-for 优先级已更改
- v-bind=“object” 现在排序敏感
- v-on:event.native 修饰符已移除
- v-for 中的 ref 不再注册 ref 数组
组件
- 只能使用普通函数创建函数式组件
- functional attribute 在单文件组件 (SFC) 的
<template>
和 functional 组件选项中被废弃 - 异步组件现在需要使用 defineAsyncComponent 方法来创建
- 组件事件现在需要在 emits 选项中声明
渲染函数
- 渲染函数 API 更改
- $scopedSlots property 已移除,所有插槽都通过 $slots 作为函数暴露
- $listeners 被移除或整合到 $attrs
- $attrs 现在包含 class 和 style attribute
自定义元素
- 自定义元素检测现在在模板编译时执行
- 特殊的 is attribute 的使用被严格限制在被保留的
<component>
标签中
其他小改变
- destroyed 生命周期选项被重命名为 unmounted
- beforeDestroy 生命周期选项被重命名为 beforeUnmount
- default prop 工厂函数不再可以访问 this 上下文
- 自定义指令的 API 已更改为与组件生命周期一致,且 binding.expression 已移除
- data 选项应始终被声明为一个函数
- 来自 mixin 的 data 选项现在为浅合并
- Attribute 强制策略已更改
- 一些过渡的 class 被重命名
<TransitionGroup>
不再默认渲染包裹元素- 当侦听一个数组时,只有当数组被替换时,回调才会触发,如果需要在变更时触发,则必须指定 deep 选项
- 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 的
<template>
现在被视为普通元素,并将渲染为原生的<template>
元素,而不是渲染其内部内容。 - 已挂载的应用不会取代它所挂载的元素
- 生命周期的 hook: 事件前缀改为 vnode-
被移除的 API
- keyCode 作为 v-on 修饰符的支持
- o n 、 on、 on、off 和 $once 实例方法
- 过滤器 (filter)
- 内联模板 attribute
- $children 实例 property
- propsData 选项
- $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
- 全局函数 set 和 delete 以及实例方法 $set 和 $delete。基于代理的变化检测已经不再需要它们了。
Element 和 Element Plus 框架也有所修改,请自行查阅 Element Plus 文档,对组件用法进行调整。
历时
可能你会比较关系项目升级的耗时,以我公司项目为例,整个 Vue2 项目大概 200 多个页面,包括40多个表单。整个前端小组,5个人历时一个半月初步完成第一版,时间还是有点赶,主要在升级过程中不能开发新需求,怕积压了太多客户需求。上线后总体没有太多大问题,但是避免不了一些小问题,毕竟是整个项目的迁移,有问题马上解决就行了。不要耽误用户的时间。大概就这么多,感谢阅读!
Vue2 大型项目升级 Vue3 详细经验总结相关推荐
- 创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目 创建前的准备 开始创建 创建过程 项目正常创建 使用v ...
- 初中高级的 git 和 gerrit 技巧【大型项目实战总结 CR 经验】
序 前半部分属于基础,后半部分属于进阶.从初级到中级再到我都 hold 不住的高级.全文共 12000 余字,超干超干的那种. 然而,写完一半的时候,我突然虎躯一震,我是不是在造轮子?随后我悄悄的搜了 ...
- Qt项目升级到Qt6经验总结(别人写的,仅作记录)
这两篇文章是一样的,随便查看一个即可 https://www.jb51.net/article/216758.htm 从QT4.QT5到QT6的版本移植总结_存于心,而非流于形.-CSDN ...
- 说一说实战项目升级从vue2到vue3 之main.js 区别
相信很多人都对尤大口中的vue3蠢蠢欲动许久了,但是很多人就是一头雾水没法下手,不知道改怎么搞,或者怕项目升级报错什么的. 我自己的成功的把项目进行升级了,所以想简单记录一下. 简而言之首先就是版本嘛 ...
- Vue2要不要升级到Vue3?(尤雨溪回复解读)
作者:掘金干货君 https://juejin.cn/post/7117525259212816414 就在前两天,一篇反对Vue2升级到Vue3的文章在vue官方社区引起了热议.(原文链接:Vue ...
- 将 Net 项目升级 Core项目经验:(一)迁移Net项目为Net Core\Standard项目
迁移Net项目为Net Core\Standard项目 背景: 我们公司内部有自己ORM开发框架,最新因为需要将系统迁移到国产服务器上,所以首先需要将最基础的ORM框架改造可以运行在国产服务器上.对于 ...
- vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用 快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
- 手摸手带你玩转Vue3——Vue2升级Vue3
今年年初,尤大大公布了一个重磅消息,将Vue3作为Vue的默认版本. 这无疑不是对我们开发人员的内卷煽风点火! vue默认版本改动意味着,官方将会把Vue研发重心放到vue3上,vue2也开始走下坡路 ...
- 不要再用 Vue2 的思维写 Vue3 了
点击关注下方卡片关注我???????? 回复"Vue3"查阅 Vue3精选文章 升级Vue3后,让人最脑壳疼的应该是新的Compostion API语法,他的难点不是语法,而是他提 ...
最新文章
- IO知识点整理(序列化,管道流,数据流,字节数组流,与编码)
- php查看表创建结构,MySQL 查看表结构简单命令
- Navigation Drawer介绍
- 软著申请时的软件说明书如何制作
- 手机局域网html,手机遥控电脑开机神器!局域网唤醒App
- 清除浮动的方法以及优缺点
- c语言二级考试程序设计题难吗,计算机二级c语言难吗 考试题型是什么
- AECC2015官方破解补丁/AdobeAfterEffectsCC2015中文版免费下载(AE安装教程)
- 样本T检验、方差分析(ANOVA)、wilcoxon秩和检验、KW秩和检验详解和操作步骤
- 汉字转拼音,并返回第一个字母
- Linux系统异常夯死或宕机分析
- 在php中 var什么意思,php关键字”var”的作用是什么?
- Nim游戏、3的幂、4的幂
- python大数据作业-客户价值分析-实训头歌
- 网站502错误分析解决办法
- 显控触摸屏SA-4.3A下载程序提示:选择的HMI型号不匹配
- 盗版Win7的危害方面
- R语言与回归分析计算实例
- 指挥系统核心服务器,应急指挥中心指挥调度系统-20210623121945.pdf-原创力文档
- 《中学历史核心素养校本化实施的培育研究》阶段性研究会议召开
热门文章
- 10个迷惑新手的Cocoa,Objective-c开发难点和问题 39|MX21k
- 微信小程序集合4(51报名管家+地图定位和导航+仿ofo共享单车+仿麦当劳点餐+购物节抽奖+婚庆摄影商店)
- VScode下使用MySQL
- 《我编程,我快乐》 摘抄
- [NUAA]Python用UDP协议建立带有私聊功能的网络聊天室-建立聊天工具
- STM32外部晶振8M更改为25M
- 只需一行Python代码即可玩20几款小游戏
- 四点共面(混合积 x 乘 与 . ”乘)
- Android图文并茂如何存储,图文并茂,手把手教您如何将笔记本/iphone手机,安卓系统手机传屏到投影/电视...
- PyCharm使用pip命令或从settings处下载包失败的解决方案