vue3新特性 多方面总结vue3.0新特性

尤雨溪大佬前一阵在某乎上发布了想法说Vue 3 现已成为新的默认版本！对于还在用vue2的我来说属实有点手忙脚乱，既然已经成为默认版本了，那就说明我们前端又要开始学习新的知识了（毕业了也要继续学习）

首先先来介绍一下vue3相对vue2有哪些方面的提升：

• Compostion api 代替了 Option api ，Compostion API 中时根据逻辑相关组织代码的，提高可读性和可维护性
• 性能比Vue2.x快1.2~2倍；按需编译，体积比vue2.x更小
• 响应式 Proxy 代替 Object.defineProperty
• 对 typescript 支持更好，更先进的组件

接下来介绍一下vue3具体都有哪些新特性？

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

Composition API

一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。Composition API 的灵感来自于 React Hooks，是比 mixin 更强大的存在。它可以提高代码逻辑的可复用性，vue2中,我们用到的是Options API，什么是Options API呢？就是我们平时会在data,methods，computed，watch中等等定义属性和方法来处理页面上的逻辑，这种方式为就是所谓的Options API。但是如果方法很多的时候前端维护起来就会很麻烦。但是Composition API就会很好的解决该问题。

Performance

vue3.0相对于vue2.0来说性能快1.2到1.5倍，主要原因如下：

.运用了diff方法优化
.静态提升,对于不参与更新的元素，只会被创建一次，在渲染时直接复用
.cacheHandlers 事件侦听器缓存,默认情况下onClick会被视为动态绑定，所以每次都会区追踪它的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用。当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。
.ssr 渲染,当静态内容大到一定量级的时候，会用_createStaticVNode方法在客户端去生成一个static node。这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。
1
2
3
4

Tree shaking support

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

Custom Renderer API

开放了 自定义 render 函数的 API，即Custom Renderer API。

Fragment，Teleport（Protal），Suspense

• Fragment:在vue3中，引入组件，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。减少了标签层级, 减小内存占用
• Teleport（Protal）：Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示
• Suspense：它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

Better TypeScript support

Vue3.x采用TypeScript重写