相对于Vue2.0 3.0有了比较大的改进,优势主要有以下几点:
一、性能提升
1、Vue3.0的响应式系统使用了Proxy代理对象,取代了Vue2.0中的Object.defineProperty,使得Vue3.0的响应式系统更快、更灵活。
2、Vue3.0对TypeScript的支持更加友好,提供了更准确的类型推断和更好的类型检查,使得在使用TypeScript时开发更加顺畅。
3、优化了diff 的算法,新增了静态标记PatchFlag:在创建vnode的时候,会根据vnode的内容是否可以变化,为其添加静态标记PatchFlag。在diff的时候,只会比较有PatchFlag的节点,这减少了需要比对的内容,提高了效率。
4、静态提升:对于不参与更新的vnode,Vue3.0会做静态提升,只会被创建一次,在re-render时直接复用,这避免了不必要的重新创建。
5、事件侦听缓存:在Vue2.0中,事件侦听属性需要进行对比,但在Vue3.0中,如果事件是不会变化的,会将事件侦听属性缓存起来(跟静态提升达到的效果类似),该节点也不会被标记上PatchFlag,这节约了不必要的性能消耗。
6、减少创建组件实例的开销:在Vue2.x中,每创建一个实例,在this上要暴露data、props、computed这些,都是靠Object.defineProperty去定义的,这部分操作比较费时。而在Vue3.0中,基于Proxy,减少了创建组件实例的性能开销。
二、体积更小:
Vue3.0的核心库经过优化,体积更小,加载速度更快。这对于移动端应用和性能敏感的应用来说非常重要。同时,Vue3.0的模块系统被重新设计,支持更好的Tree-shaking,这意味着在构建应用时可以更轻松地剔除未使用的代码,减小最终打包文件的体积。
三、更易于维护:
Vue3.0引入了新的组合式API(Composition API),允许开发者更灵活地组织组件逻辑。与Vue2.0的Options API相比,Composition API更容易理解和维护,尤其是在处理大型和复杂的组件时。同时,Vue3.0还引入了Teleport特性,允许在DOM树的任意位置渲染组件,这使得在应用中创建复杂的布局变得更加容易,同时提高了灵活性和可维护性。
composition api:本质上应该就是要去解决传统vue2的options api的两个问题:
问题1:就是一个功能块代码分散到各个options上,比如data去处理reactive数据,props去接收外部参数,methods对各种操作相应等,当该模块功能越来越多时,维护起来相当麻烦
问题2:就是各个模块通过mixins共享数据和方法时导致的混乱。比如功能一复杂,我们往往都搞不清楚一个方法或者变量是来自哪里的,更别提一不小心引发的命名冲突了。
Vue3通过将需要的函数和数据都统一集中组合到setup中,当然就解决了问题1所说的完成一个功能所需要的代码过于分散难以维护的问题了。
同时,因为vue3中需要用到的数据和方法都是通过setup来返回才能被使用的,而返回数据的地方相当集中,且加上typescript赋予vscode等代码编辑工具的类型检测功能,这样就基本避免了mixins带来的问题2。
四、更强大的自定义指令:
Vue3.0引入了更强大的自定义指令系统,使得开发者可以更容易地创建和管理自定义指令,增加了框架的灵活性和可扩展性。
五、更好的生态系统:
随着Vue的不断发展,Vue3.0的生态系统也在不断壮大,包括了丰富的第三方库和工具,为开发者提供了更多选择和可能性。