最近决定把项目重构下,把项目框架从vue2升级到vue3,那为什么要升级到vue2呢,vue3的优势有哪些?
Composition API + setup
- 优化逻辑组织
相同功能的代码编写在一块,而不像
options API那样,各个功能的代码混成一块
- 优化逻辑复用
在
vue2中,我们是通过mixin实现功能混合,如果多个mixin混合,会存在两个非常明显的问题:命名冲突和数据来源不清晰。
而通过
composition这种形式,可以将一些复用的代码抽离出来作为一个函数,只要的使用的地方直接进行调用即可。
- compositon Api 几乎都是函数,会有更好的类型判断。
- compostion Api 对 tree-shaking 友好, 代码更容易压缩。
- compostion Api 中见不到this的使用,减少了 this指向不明的情况。
性能优化
-
编译阶段。对diff算法优化、静态提升、事件监听缓存、SSR优化等。
vue3 在 diff 算法中相比vue2 增加了静态标记。
-
响应式系统,proxy 替代 Object.defineProperty 监听对象,监听对象不需要再深度遍历,proxy可劫持整个对象。
-
体积包减少,Compostion API 的写法,可以更好的进行tree shaking,减少上下文没有引入的代码,减少打包后的文件体积。
-
新增片段特性。
对typeScript的支持更加友好
Vue3是基于typeScript编写的,提供了更好的类型检查,能支持复杂的类型推导。
tree shaking 特性
Tree shaking是基于ES6模板语法(import与exports),主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量。