vue3对比vue2的优势 为什么要选择vue3

1,533 阅读1分钟

最近决定把项目重构下,把项目框架从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模板语法(importexports),主要是借助ES6模块的静态编译思想,在编译时就能确定模块的依赖关系,以及输入和输出的变量。