vue3新特性 多方面总结vue3.0新特性

尤雨溪大佬前一阵在某乎上发布了想法说Vue 3 现已成为新的默认版本!对于还在用vue2的我来说属实有点手忙脚乱,既然已经成为默认版本了,那就说明我们前端又要开始学习新的知识了(毕业了也要继续学习)

image

首先先来介绍一下vue3相对vue2有哪些方面的提升:
  • Compostion api 代替了 Option api ,Compostion API 中时根据逻辑相关组织代码的,提高可读性和可维护性
  • 性能比Vue2.x快1.2~2倍;按需编译,体积比vue2.x更小
  • 响应式 Proxy 代替 Object.defineProperty
  • 对 typescript 支持更好,更先进的组件

接下来介绍一下vue3具体都有哪些新特性?

.Composition API:组合API,类似React Hooks
.Performance:性能比vue2.x块1.2~2倍
.Tree shaking support:支持按需编译,体积更小
.Custom Renderer API:暴露了自定义渲染API
.Fragment,Teleport(Protal),Suspense:新增三个组件
.Better TypeScript support:更好的支持TS
Composition API
一组低侵入式的、函数式的 API,它使我们能够更灵活地「组合」组件的逻辑。Composition API 的灵感来自于 React Hooks,是比 mixin 更强大的存在。它可以提高代码逻辑的可复用性,vue2中,我们用到的是Options API,什么是Options API呢?就是我们平时会在data,methods,computed,watch中等等定义属性和方法来处理页面上的逻辑,这种方式为就是所谓的Options API。但是如果方法很多的时候前端维护起来就会很麻烦。但是Composition API就会很好的解决该问题。
Performance
vue3.0相对于vue2.0来说性能快1.2到1.5倍,主要原因如下:
.运用了diff方法优化
.静态提升,对于不参与更新的元素,只会被创建一次,在渲染时直接复用
.cacheHandlers 事件侦听器缓存,默认情况下onClick会被视为动态绑定,所以每次都会区追踪它的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用。当静态内容大到一定量级的时候,会用_createStaticVNode方法在客户端去生成一个static node。这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染。
.ssr 渲染,当静态内容大到一定量级的时候,会用_createStaticVNode方法在客户端去生成一个static node。这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染。
Tree shaking support

Vue3.x中的核心API都支持tree-shaking,这些API都是通过包引入的方式而不是直接在实例化时就注入,只会对使用到的功能或特性进行打包(按需打包),这意味着更多的功能和更小的体积。

Custom Renderer API

开放了 自定义 render 函数的 API,即Custom Renderer API。

Fragment,Teleport(Protal),Suspense
  • Fragment:在vue3中,引入组件,组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中。减少了标签层级, 减小内存占用
  • Teleport(Protal):Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示
  • Suspense:它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验
Better TypeScript support

Vue3.x采用TypeScript重写

猜你喜欢

转载自blog.csdn.net/weixin_48138187/article/details/133157101