还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能

路漫漫其修远兮，吾将上下而求索。——献给全部为 Vue的发展而默默付出的开发者们。

(图片来源于网络)

前几天，Vue正式进入了beta阶段，做为一个日渐流行的JavaScript库，Vue.js由Evan You和Vue社区的284多名成员建立。现在，它已拥有超过120万用户，并成为用来解决大型单页web应用程序的有效手段。

(图片来源于网络)

在撰写本文时，Vue.js 3.0.0已经对外发布了Beta版，其中最重要的变化是受React Hooks的启发，在新的API中容许使用基于函数的方式编写组件。

(图片来源于网络)

如下是Vue.js 3.0.0 中的新功能：

· 容许使用基于函数的方式编写组件

· 虚拟DOM重写可提升性能并改善TypeScript支持

· 原生门户

· Fragments 片断（不会在DOM树中渲染的虚拟元素）

· 全局mounting

· 有条件地暂停组件渲染

咱们将从性能、代码优化（Tree-shaking）、函数式API（Composition API）等方面，盘点 Vue.js 3.0.0 中那些让人激动的功能。

性能

Vue.js的发展，向来都是以提升开发与构建的速度为驱动，对比3.0和此前的Vue版本，这一点尤其明显。因为虚拟DOM已被彻底重写，所以这个新版本将比以往更快。

对于服务器端渲染，Vue.js 3.0.0的性能提升了2倍，速度提升了3倍。同时，组件的初始化如今也更加高效，甚至具备了编译器通知的快速执行路径。

代码优化（Tree-shaking）

在Vue.js 3.0.0中，提供了“摇树”支持，即经过"摇"咱们的JS文件，将其中用不到的代码"摇"掉。

(图片来源于网络)

具体来讲，在 webpack 项目中，有一个入口文件，至关于一棵树的主干，入口文件有不少依赖的模块，至关于树枝。在实际状况中，虽然依赖了某个模块，但其实只使用其中的某些功能。经过 tree-shaking，即可将没有使用的模块摇掉，这样来达到代码优化的目的。

如今，Vue中可选的大多数功能都支持“摇树”，例如过渡和v模型。这极大地减少了Vue应用程序的大小，例如一个标准HelloWorld系统如今的文件大小仅为13.5kb（经过使用composition API，它的大小甚至能够降到11.75kb）。

“摇树”的出现，容许一个包括了全部运行时功能的项目大小可缩至22.5kb。这意味着即便增长了更多功能，Vue 3.0.0仍然比任何2.x版本都轻盈。

Composition API

Composition API 是一种全新的逻辑重用和代码组织方法。

Vue团队主要对当前的Composition API进行了添加和改进，而不是进行重大更新，这让已经熟悉了Vue2语法的人能够更容易上手。

此前，咱们常用“options”API （如data、methods、computed等属性）来构建组件，目的就是为了将逻辑添加到Vue组件中。这种方法最大的缺点是：它自己并非一个标准的JavaScript代码。所以，您须要确切地知道模板中能够访问哪些属性以及this关键字的行为。在底层，Vue编译器须要将此属性转换为标准代码。正由于如此，咱们没法从自动建议或类型检查中获益。

因此，Vue团队推出了composition API来解决这些问题，它具有了在Vue组件中使用和重用纯JS函数的灵活性和自由度。

composition API以下所示：

<script>
export default {
         setup() {
           return {
             average(), range(), median()
           }
         }
       } function average() { } 
function range() { } 
function median() { }
</script>

使用composition API并不意味着不能使用“options”API。相反，咱们能够将 composition API与options API一块儿使用。（就像在React的钩子中那样）

Fragments

Vue JS将在 3.0.0版本中引入相似React Fragments的功能，该功能的主要需求是由于在以前的版本中Vue模板只能拥有一个根节点，所以，当建立相似像下面这样的组件时，将返回错误：

<template>
<div>Root1</div>
<div>Root2</div>
</template>

任何Vue组件都须要绑定在单个根节点中，在3.0中将内置容许模板组件拥有多个根节点功能，这一点和React的功能相似。

Teleport

Teleport（之前称为Portal）是将子节点渲染到DOM谱系以外的DOM节点中的安全通道，例如弹出窗口甚至是模式。在此以前，使用CSS一般会遇到不少麻烦，如今Vue容许您使用<Teleport>在模板部分中进行处理。我相信Teleport受到React门户的启发，并将随Vue JS的3.0.0版本一块儿提供。

Suspense

Suspense的提供可让咱们在应用延迟加载一些内容的同时，使加载过程可视化，这个过程能够是一个加载动画或是一个占位符，这样无疑会使用户体验更流畅，也会让程序的性能从感知层面上有一些提高。

更好的TypeScript支持

Vue 3.0版本已经使用了TypeScript重写，对于终端用户来说，不论用户使用的是TS仍是JS，都会得到更好的编程体验，包括静态检查等。即便你用的是JS，你仍然能够获得参数的提示、类型声明，甚至能够跳进类型声明中去看源码， TS与JS在代码和API之间没有太大区别。而且，目前若是你喜欢使用Class组件，它仍受支持。

当前Vue 3.0.0的版本状态

根据GitHub上该项目的发布计划，Vue 3.0.0版的正式发布计划定于2020年第一季度。目前来看进度是有一些延迟。但Vue 3.0.0正式beta测试仍然按计划启动了，这意味着日程中全部请求都已经处理和完成。

如今团队的重点是文档和升级指南的建立，另外Router和Vuex还有一些兼容性的改动，最后可能会还有一些实验性的小工具，例如：Vite，它是一个支持热更新的web服务器，实际用起来仍是挺有意思的。

2.x系列会有最后一次小版本更新

做为多是Vue 3.x版本正式发行以前的2.x系列的最后一个小版本更新。它将从3.0.0版本向后移植兼容，并加上在3.0.0删除的功能显示相应的弃用警告。

最后

根据已经过的测试来讲明这个版本是市场上最快的前端框架。你能够在此处查看此次直播的ppt，以上为此次Vue 3.0.0 Beta的功能说明，是否有你喜欢的内容呢？

---

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网
如需了解全面兼容 Vue 的纯前端表格控件，请前往 SpreadJS 官网