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

[GrapeCityChina]

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

---

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

[whevether]

直接 react hooks 不香吗?

[wly19960911]

@whevether

Java 11 的问 Java 8：Java 11 不香吗？为什么不升级

rust 问 c++ ：直接 rust 不香吗？

go 问 Java：直接 go 轻量级不香吗？

技术是项目的实现手段又不是最终目的，这个手段搞得普通小开发就能选择的一样。如果抛开生态问题，我重新用 jQuery 都能好好开发。

[SilentDepth]

原文标题前半句，说实话令人反感。


@whevether #1 不香。

[SilentDepth]

大概浏览了一下文章内容。这写的什么啊，这就是机翻啊，能不能把原文地址发出来？

[GrapeCityChina]

@SilentDepth 额 首先感谢你的意见，这个是由我们汇总了好几篇文章组稿的，水平有限，见谅

[Nicoco]

Angular 、Vue 、React 、jQuery，看情况选择吧，毕竟人使用工具，而不是工具使用人。

[SilentDepth]

「允许使用基于函数的方式编写组件」
我猜说的是 Composition API 。但这种表述方式太 english 了。

「虚拟 DOM 重写可提高性能并改善 TypeScript 支持」
机翻车祸现场既视感。

「原生门户」
想了半天，大概是说 Portal ？一，Portal 在这里不是「门户」的意思（而是「传送门」的意思）；二，这个组件现在已经叫 Teleport 了。

「 Fragments 片段（不会在 DOM 树中渲染的虚拟元素）」
谁说 Fragment 不会渲染到 DOM 树了？

「全局 mounting 」
没明白说的是啥。

「有条件地暂停组件渲染」
是说 Suspense ？这个跟第一条一样，表述方式太奇怪。

然后吧，下文其实又修正了部分错误。如果这篇文章是楼主结合多个来源组出来的，自己不通读校对一遍吗 = =

[forgottencoast]

@SilentDepth
下面这些正确的话应该怎么说呢？

「允许使用基于函数的方式编写组件」
我猜说的是 Composition API 。但这种表述方式太 english 了。

「虚拟 DOM 重写可提高性能并改善 TypeScript 支持」
机翻车祸现场既视感。

「有条件地暂停组件渲染」
是说 Suspense ？这个跟第一条一样，表述方式太奇怪。

[gouflv]

并不会很激动，以后少安装一个 Composition 的依赖而已

[SilentDepth]

@forgottencoast #8
第一条可以说「使用函数式 API 编写组件」。

第二条的表述是有问题的，VDOM 重写跟 TS 支持没关系。要素不变的前提下要分开说：「重新编写 VDOM 系统并显著提高性能；更好的 TypeScript 支持」。

第三条的表述也有问题，但我没见过原文不知道其本意是什么。我猜是想说：「使用 Suspense 控制组件的渲染」。