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

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://blog.bitsrc.io/vuejs-3-0-0-beta-features-im-excited-about-c70b82fac163

路漫漫其修远兮，吾将上下而求索。——献给所有为 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的功能说明，是否有你喜欢的内容呢？