vue3的新特性

202 阅读2分钟

六大亮点

vue3官方文档

rSCl4A.jpg

  • Performance:性能更比Vue 2.0强。

  • Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。

  • Composition API:组合API

  • Fragment, Teleport, Suspense:“碎片”,TeleportProtal传送门,“悬念”

  • Better TypeScript support:更优秀的 Ts 支持

  • Custom Renderer API:暴露了自定义渲染API

1、Performance

rSCr3q.jpg

  • 重写了虚拟Dom的实现(且保证了兼容性,脱离模版的渲染需求旺盛)。

  • 编译模板的优化。

  • 更高效的组件初始化。

  • update性能提高 1.3~2 倍。

  • SSR速度提高了 2~3 倍。

rSPAaQ.jpg

2、Tree shaking support

rSPdsK.jpg

  • 可以将无用模块“剪辑”,仅打包需要的(比如v-model,,用不到就不会打包)。
  • 一个简单“HelloWorld”大小仅为:13.5kb,11.75kb,仅Composition API。
  • 包含运行时完整功能:22.5kb,拥有更多的功能,却比Vue 2更迷你。

很多时候,我们并不需要 vue提供的所有功能,在 vue 2 并没有方式排除掉,但是 3.0 都可能做成了按需引入

3、Composition AP

rSk5dO.jpg

React Hooks 类似的东西,实现方式不同。

  • 可与现有的 Options API一起使用

  • 灵活的逻辑组合与复用

  • vue 3的响应式模块可以和其他框架搭配使用

混入(mixin) 将不再作为推荐使用, Composition API可以实现更灵活且无副作用的复用代码。

Composition API 文档地址

Composition API包含了六个主要API

4、Fragment

rSAllR.jpg

Fragment翻译为:“碎片”

  • 不再限于模板中的单个根节点

  • render 函数也可以返回数组了,类似实现了 React.Fragments 的功能 。

  • Just works

<Teleport>

rSE83j.jpg

<Suspense>

rSEwUU.jpg

Suspense翻译为:“悬念”

  • 可在嵌套层级中等待嵌套的异步依赖项

  • 支持async setup()

  • 支持异步组件

虽然React 16引入了Suspense,但直至现在都不太能用。如何将其与异步数据结合,还没完整设计出来。

Vue 3 的<Suspense>更加轻量:

仅 5%应用能感知运行时的调度差异,综合考虑下,Vue3 的<Suspense> 没和 React 一样做运行调度处理

5、更好的TypeScript支持

rSEbrt.jpg

  • Vue 3是用TypeScript编写的库,可以享受到自动的类型定义提示

  • JavaScriptTypeScript中的 API 是相同的。事实上,代码也基本相同

  • 支持TSX

  • class组件还会继续支持,但是需要引入vue-class-component@next,该模块目前还处在 alpha 阶段。

还有Vue 3 + TypeScript 插件正在开发,有类型检查,自动补全等功能

6、Custom Renderer API:自定义渲染器 API

rSVkZV.jpg

  • 正在进行NativeScript Vue集成

  • 用户可以尝试WebGL自定义渲染器,与普通 Vue 应用程序一起使用(Vugel)。

意味着以后可以通过 vueDom 编程的方式来进行 webgl 编程 。

感兴趣可以看这里:Getting started vugel

剩余工作

全家桶插件组件过渡到vue3.+

要点

新工具:vite(法语 “快”)

地址:github.com/vuejs/vite

一个简易的http服务器,无需webpack编译打包,根据请求的Vue文件,直接发回渲染,且支持热更新(非常快)