手记
下载APP
继续浏览精彩内容
慕课网APP
程序员的梦工厂
继续

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

葡萄城控件
关注TA
已关注
手记 236
粉丝 55
获赞 344

路漫漫其修远兮,吾将上下而求索。——献给所有为 Vue的发展而默默付出的开发者们。
image.png

(图片来源于网络)

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

image.png

(图片来源于网络)

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

image.png

(图片来源于网络)

以下是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文件,将其中用不到的代码"摇"掉。

image.png

(图片来源于网络)

具体来说,在 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受到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 官网

打开App,阅读手记
0人推荐
随时随地看视频慕课网APP