六大亮点
-
Performance:性能更比Vue 2.0强。 -
Tree shaking support:可以将无用模块“剪辑”,仅打包需要的。 -
Composition API:组合API -
Fragment, Teleport, Suspense:“碎片”,Teleport即Protal传送门,“悬念” -
Better TypeScript support:更优秀的 Ts 支持 -
Custom Renderer API:暴露了自定义渲染API
1、Performance
-
重写了虚拟
Dom的实现(且保证了兼容性,脱离模版的渲染需求旺盛)。 -
编译模板的优化。
-
更高效的组件初始化。
-
update性能提高 1.3~2 倍。 -
SSR速度提高了 2~3 倍。
2、Tree shaking support
- 可以将无用模块“剪辑”,仅打包需要的(比如v-model,,用不到就不会打包)。
- 一个简单“HelloWorld”大小仅为:13.5kb,11.75kb,仅Composition API。
- 包含运行时完整功能:22.5kb,拥有更多的功能,却比Vue 2更迷你。
很多时候,我们并不需要 vue提供的所有功能,在 vue 2 并没有方式排除掉,但是 3.0 都可能做成了按需引入
3、Composition AP
与React Hooks 类似的东西,实现方式不同。
-
可与现有的
Options API一起使用 -
灵活的逻辑组合与复用
-
vue 3的响应式模块可以和其他框架搭配使用
混入(mixin) 将不再作为推荐使用, Composition API可以实现更灵活且无副作用的复用代码。
Composition API包含了六个主要API
4、Fragment
Fragment翻译为:“碎片”
-
不再限于模板中的单个根节点
-
render函数也可以返回数组了,类似实现了React.Fragments的功能 。 -
Just works
<Teleport>
<Suspense>
Suspense翻译为:“悬念”
-
可在嵌套层级中等待嵌套的异步依赖项
-
支持
async setup() -
支持异步组件
虽然React 16引入了Suspense,但直至现在都不太能用。如何将其与异步数据结合,还没完整设计出来。
Vue 3 的<Suspense>更加轻量:
仅 5%应用能感知运行时的调度差异,综合考虑下,Vue3 的<Suspense> 没和 React 一样做运行调度处理
5、更好的TypeScript支持
-
Vue 3是用TypeScript编写的库,可以享受到自动的类型定义提示 -
JavaScript和TypeScript中的 API 是相同的。事实上,代码也基本相同 -
支持
TSX -
class组件还会继续支持,但是需要引入vue-class-component@next,该模块目前还处在 alpha 阶段。
还有Vue 3 + TypeScript 插件正在开发,有类型检查,自动补全等功能
6、Custom Renderer API:自定义渲染器 API
-
正在进行
NativeScript Vue集成 -
用户可以尝试
WebGL自定义渲染器,与普通 Vue 应用程序一起使用(Vugel)。
意味着以后可以通过 vue, Dom 编程的方式来进行 webgl 编程 。
感兴趣可以看这里:Getting started vugel
剩余工作
全家桶插件组件过渡到vue3.+
要点
新工具:vite(法语 “快”)
一个简易的http服务器,无需webpack编译打包,根据请求的Vue文件,直接发回渲染,且支持热更新(非常快)