Vue3的新特性(这6个Vue3新特性需知道)

Vue团队于2020 年9月18日晚11点半发布了Vue 3.0 版本，本次主版本更新包含性能的改进，更小的 bundle 体积，对 TypeScript 更好的支持，用于处理大规模用例的全新 API，以及为框架未来的长期迭代奠定了夯实的基础，本文讲述Vue3的新特性。

这6个Vue3新特性需知道：

1、性能比vue2.x快1.2～2倍-Performance；

2、支持tree-shaking-Tree shaking support；

3、引入了Composition API-Composition API；

4、暴露了自定义渲染API-Custom Renderer API；

5、新增三个组件（Fragment、Teleport、Suspense);

6、更好的支持TS-Better TypeScript support；

一、Performance

1、Vue3.0在性能方面比Vue2.x快了1.2～2倍。

2、重写虚拟DOM的实现

3、运行时编译

4、静态提升与事件侦听器缓存

5、SSR 速度提高

二、Three-shaking support

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

三、Composition API

Vue2.x中，我们通常采用mixin来复用逻辑代码，使用起来虽然方便，但也存在一些问题：代码来源不清晰、方法属性可能出现冲突。因此，Vue3.x引入了Composition API（组合API），使用纯函数分割复用代码。和React Hooks的概念相似。

1、更好的逻辑复用和代码组织

2、更好的类型推导

四、Fragment、Teleport、Suspense

1、Fragment

在书写Vue2.x时，由于组件必须是一个根结点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的（这和React 中的Fragment组件是一样的）。

2、Teleport

Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

五、API-Custom Renderer API

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。