vue2 页面 迁移到 vue3，总结梳理

一、页面性能提升对比

以目前的彩经页面中的方案tab页面为例进行效果对比。

从页面加载速度，页面性能指数和jenkins构建速度，三个维度进行对比总结。

1. 页面加载速度

每次测试数据以“清除缓存并重新加载”模式进行数据采集。因为vue3采用了静态树技术，迁移后页面的dom结构渲染，即页面整体架构平均渲染速度从363ms提升到200ms，提升45%。

页面整体加载速度对比，从1.2s提升到610ms，提升49.1%。

如果不用清除缓存加载的方式，来访问页面，会更快，页面整体加载完成时间从250ms-300ms左右提升到150ms-230ms左右。

2. 页面性能指数

页面性能对比采用chrome自带功能 Lighthouse

页面整体性能指数从61 => 71

重点关注以下几个指标

1.First Contentful Paint，即第一次完整的绘画，指页面完整绘制出来的时间（不包括loading状态），这个提升较大，从之前的4.3s提升到了1.6秒，整体提升超过62%。

2.Largest Contentful Paint，大内容文件加载时间，此项不会阻塞页面渲染，大多数为过大的图片之类，本次并没有将全部图片优化，但是结合架构升级，整体速度从9.5s提升到3s，提升65%。

3.Total Blocking Time，指从FCP(完整画出页面后)，到页面可交互的等待时间，可交互概念为持续5s内无长任务，异步队列和get请求等。从160ms提升到70ms，提升56%

二、迁移做了哪些事

本次主要是迁移原有全部功能，没有过多的进行项目优化，采用vue3 setup语法糖，主要修改部分在于生命周期各个部分写法，属性定义，方法定义，各组件之间传值方式修改，全局方法注入变化等。

步骤参考

1. 因为dom部分不需要有太多变化，所以先将页面dom结构先部分进行迁移，比如页面头部广告位，先将广告位的dom结构迁移过来。

2. dom结构迁移后，dom中用到的属性进行定义，基本类型采用ref，复杂类型采用reactive。

3. 属性定义完成后进行dom中用到的方法和事件迁移，此处因为用到了setup语法糖，所以整体js需要逐句更改，比如this指针在setup语法糖中不存在，可以直接引用定义过的属性赋值。

4. 全局方法注入，比如axios，我采用的是通过app.config.globalProperties.$httpUrl = axios的方式进行axios或者stat等全局方法的注入方式，页面中调用需要应用getCurrentInstance()来获取。

5. 生命周期修改，比如之前的mounted(){},修改成onMounted(() => {})，等等，再进行生命周期中对应事件的迁移。

6. 由于新项目中可能会有一些老项目中未移过来的公共组件或者方法，遇到这种需要从老项目中先原封不动的迁移过来，如有相关插件未安装，那么安装一下，安装时候记得采用私域库。

7. 构建自测。

迁移前后代码结构对比

三、vue3对比vue2

那么vue3较vue2为什么有这样明显的页面速度和性能提升呢，主要可能有下面几个方面的原因：

1. 最基础的是vue3通过Proxy对象代替Object.defineProperty来实现双向数据绑定，proxy给对象设置了拦截，任何访问对象的操作之前先经过拦截，不用通过vue2中getter和setter来实现动态绑定，减少了getter和setter的消耗，同时还能实现对象的深度监听。对性能和开发都比较友好。

2. vue3中使用了Tree-shaking技术，可以在打包时自动移除未使用的代码，从而减小了打包体积。

3. vue3中使用了静态树提升技术，静态树指的是不会发生数据改变的节点，在编译阶段，静态树会被标记并提升到setup函数中，在渲染时候直接使用该节点，不会进行虚拟节点创建，这一点对dom加载时长有很大提升，上面的数据中有体现。

开发友好角度

组合式api

vue2采用的是选项式api，vue3中是组合式api，尤其是setup语法糖，使用时更能体现组合式的含义，选项式api是将data和methods和watch或者created等分开进行管理。setup语法糖应用后将这些逻辑放到了一起，属性也不再需要return使用。