vue3.0有哪些新特性

最新推荐文章于 2024-04-01 08:35:30 发布

风随心飞飞

最新推荐文章于 2024-04-01 08:35:30 发布

阅读量4k

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/u014212540/article/details/124303432

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

概况

vue3.0新特性有：
1、性能比vue2.x块1.2～2倍；
2、支持tree-shaking；
3、引入了Composition API；
4、暴露了自定义渲染API；
5、新增三个组件（Fragment、Teleport、Suspense）等。

vue3 带来的六大新特性

Performance：性能比vue2.x块1.2～2倍
Tree shaking support：支持按需编译，体积更小
Composition API：组合API，类似React Hooks
Custom Renderer API：暴露了自定义渲染API
Fragment，Teleport（Protal），Suspense：新增三个组件
Better TypeScript support：更好的支持TS

Performance
Vue3.0在性能方面比Vue2.x快了1.2～2倍。
重写虚拟DOM的实现
运行时编译
静态提升与事件侦听器缓存
SSR 速度提高

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

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

更好的逻辑复用和代码组织
更好的类型推导
Fragment、Teleport、Suspense
新增三个组件。

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

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

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index
样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。

Suspense
同样的，这和React中的Supense是一样的。

Suspense 让你的组件在渲染之前进行“等待”，并在等待时显示 fallback 的内容。

Better TypeScript support
Vue3.x采用TypeScript重写，开发者使用Vue3.x时可以充分体验TS给编码带来的便利。

Custom Renderer API
这个API定义了虚拟DOM的渲染规则，这意味着使用自定义API可以达到跨平台的目的。

最后：Vue3.0 是如何变快的？
diff 算法优化

Vue2 中的虚拟dom 是进行全量对比
Vue3 新增静态标记
hoistStatic 静态提升

Vue2 中无论元素是否参与更新，每次都会重新创建，然后在渲染
Vue3 中对于不参与更新的元素，会做静态提升，只被创建一次，在渲染时直接复用即可
cacheHandlers 事件侦听器缓存

默认情况下默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
ssr 渲染

当有大量静态的内容的时候，这些内容会被当作纯字符串推进一个buffer里面，即使存在动态的绑定，会通过模版插值嵌入进去，这样会比通过虚拟dom来渲染的快上很多很多
当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。