浅谈Vue3的优势
Posted Joker_Ye
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈Vue3的优势相关的知识,希望对你有一定的参考价值。
Vue2已经非常优秀,且具备完善的社区和生态,但是Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化
1.monorepo
源码管理方式采用monorepo
的方式进行管理,monorepo
把这些模块拆分到不同的 package
中,每个 package
有各自的 API、类型定义和测试。这样使得模块拆分更细化,职责划分更明确,模块之间的依赖关系也更加明确,开发人员也更容易阅读、理解和更改所有模块源码,提高代码的可维护性。
2 TypeScript
Vue2
时期选择的是flow
,由于flow
自身存在一些功能上的短板,且TS
发展势头更好,Vue3
选择使用TS
编写代码,也可以更好的支持TS
提升开发体验。
3 优化源码体积
主要从两个方面进行了源码体积优化:
移除一些冷门API,比如 filter
、inline-template
等
API减少,必然会减少代码体积,这点非常容易理解,引入tree-shaking
减少打包体积
tree-shaking
依赖 ES2015
模块语法的静态结构(即 import
和 export
),通过编译阶段的静态分析,找到没有引入的模块并打上标记,这个技术在webpack
等打包工具上已经非常普及
在Vue3中的应用:我们大概率不会使用Vue
提供的全部API
,总会有一些冷门的、业务场景单一使用不到的API,那么在打包的过程中就可以将这些没有被用户使用的API
移除,减少打包体积。
4 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...
)
4 Composition API
Vue3
在语法方面进行了优化,主要是提供了 Composition API
替换原本的Options API
Options API
提供了 methods
、computed
、data
、props
以及各个阶段的生命钩子选项,开发者可以在每个API中做着对应的事情,各司其职,上手和理解成本非常低,对于新手开发者非常友好。使用其开发小型项目时代码的阅读性、维护性等也是可观的,但是当遇到大型项目或者较为复杂的业务逻辑时,代码将会变得非常难以维护,常常导致修改一个功能需要在代码中跳转多个地方,一个功能的代码分散在各个地方,造成阅读和理解成本直线增加,Composition API
,它有一个很好的机制去解决这样的问题,就是将某个逻辑关注点相关的代码全都放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中跳来跳去。
5 更好的 ts 支持
vue2 不适合使用 ts,在于它的 Options API 风格。
options 是一个简单的对象,而 ts 是一种类型系统、面向对象的语法,两个不匹配。
vue3 新增了 defineComponent 函数,使组件在 ts 下,更好的利用参数类型推断。如:reactive 和 ref 很具有代表性。
6 更先进的组件
1> Fragment
在 vue2 中,每个模板必须有一个根节点,否则就会报错。
vue3 中可以不需要根节点,多个元素或标签可并列存在。
2> Teleport
传送门。可以把 teleport 中的内容添加到任意的节点内,对于嵌套较深的组件来说绝对是一个福音。
3> Supense
允许程序在等待异步组件渲染一些后备的内容,可以让我们创建一个平滑的用户体验。
总结:
vue 目前是国内最火的前端框架之一,vue3 性能提升、运行速度也比 vue2 好很多。
总之 vue3 就是:
- 让项目更快
- 让代码更少
- 更易于维护
- 让我们开发更快,加班更少
以上是关于浅谈Vue3的优势的主要内容,如果未能解决你的问题,请参考以下文章