浅谈Vue3的几个优势

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浅谈Vue3的几个优势脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

到此这篇关于浅谈Vue3的几个优势的文章就介绍到这了,更多相关Vue3优势内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的浅谈Vue3的几个优势全部内容,希望文章能够帮你解决浅谈Vue3的几个优势所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: