Vue3相比Vue2的优势表示在哪些方面-群英

上一篇：如何优化element穿梭框性能问题，避免渲染节点多卡顿下一篇：JS中的两种作用域是什么，执行过程分别是怎样

这篇文章主要介绍“Vue3相比Vue2的优势表示在哪些方面”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue3相比Vue2的优势表示在哪些方面”文章能帮助大家解决问题。

Vue2已经非常优秀，且具备完善的社区和生态，但是Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化

1、源码

1.1 monorepo

源码管理方式采用monorepo的方式进行管理，monorepo 把这些模块拆分到不同的 package 中，每个 package 有各自的 API、类型定义和测试。这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性

1.2 TypeScript

Vue2时期选择的是flow，由于flow自身存在一些功能上的短板，且TS发展势头更好，Vue3选择使用TS编写代码，也可以更好的支持TS提升开发体验

2、性能

2.1 优化源码体积

主要从两个方面进行了源码体积优化：

移除一些冷门API，比如 filter、inline-template 等

API减少，必然会减少代码体积，这点非常容易理解

引入tree-shaking 减少打包体积

tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记，这个技术在webpack等打包工具上已经非常普及

在Vue3中的应用：我们大概率不会使用Vue提供的全部API，总会有一些冷门的、业务场景单一使用不到的API，那么在打包的过程中就可以将这些没有被用户使用的API移除，减少打包体积

2.3 Proxy

Vue2之前使用Object.defineProperty进行数据劫持

Object.defineProperty(source, key, {
  get(){
    // todo...
  },
  set(){
    // todo...
  }
})

其存在一些缺陷

必须预先知道劫持的key是什么，并不能很好的监听到对象属性的添加、删除
初始化时递归遍历整个data，导致深层嵌套数据结构造成性能负担，
Vue3使用Proxy进行数据劫持，可以很好的规避Object.defineProperty带来的缺陷

p = new Proxy(source, {
  get() {
    // todo...
  },
  set() {
    // todo...
  }
})

2.4 Composition API

Vue3 在语法方面进行了优化，主要是提供了 Composition API替换原本的Options API

Options API提供了 methods、computed、data、props以及各个阶段的生命钩子选项，开发者可以在每个API中做着对应的事情，各司其职，上手和理解成本非常低，对于新手开发者非常友好。使用其开发小型项目时代码的阅读性、维护性等也是可观的，但是当遇到大型项目或者较为复杂的业务逻辑时，代码将会变得非常难以维护，常常导致修改一个功能需要在代码中跳转多个地方，一个功能的代码分散在各个地方，造成阅读和理解成本直线增加，Composition API，它有一个很好的机制去解决这样的问题，就是将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去

“Vue3相比Vue2的优势表示在哪些方面”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。