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

太过爱你忘了你带给我的痛 2024-04-24 21:01 123阅读 0赞

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

![image][]

> ###### 首先先来介绍一下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

> ###### 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，就不需要创建对象，然后根据对象渲染。

> ###### 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重写

[image]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/4422ba96aec24432b03f507e39c888c8.png