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

 分类:vue教程时间:2022-05-06点击:

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

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 渲染生成函数了。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: