【译】Vue 3.0 对 Web 开发意味着什么？

原文地址：What Does Vue 3.0 Mean for Web Development?

原文做者 : Matt Maribojoc

译者： Aemple

新年到 Vue2.6悄然发布🎉🎉🎉

前言

去年11月，Vue的建立者Evan You向咱们展现了Vue 3.0 —— 这是不断上升的Javascript框架的最新版本。这些优化使Vue更高效，更模块化且更易于使用。我将讨论这些变化以及我认为的他们将在Vue 3.0发布后对现有开发产生的影响。

如今的Vue是怎样的？

用他们本身的话来讲，Vue是一个“用于构建用户应用程序的渐进式框架”。它的设计很是灵活，既能够将单个Vue库合并到其余项目中，也能够彻底用VUE驱动复杂的项目。

Vue一般被视为更易于理解和易于实现的框架之一。支持纯HTML模板，而像React这样的工具是使用Javascript定义DOM元素。

截至2019年初，咱们仍然在使用Vue 2.0。虽然与React和Angular相比，Vue仍只占据了很小的市场份额，但Vue的受欢迎程度不断提升。在我看来，Vue 3.0的发布将提高其使用率，并促使其成为其余主要框架的替代品。

下面的图表显示了每一个框架在工做中的使用数量。正如你所看到的，VueJS在接近目前的行业标准以前仍然有一条很长的路要走。（资料来源：TechMagic）

Vue3.0中最明显的变化

在他的演讲中，Evan You强调了Vue 3.0中的五个关键变化：

一、更快

二、更小

三、更易于维护

四、更多的原生支持

五、更易于开发使用

如今让咱们深刻探讨这些。

让速度更快

这个主题占据了Evan You演讲的大部分时间，由于它具备最大的技术变化，显然是Vue目前的主要卖点之一。

VueJS已经以其渲染速度而闻名。在它的比较测试中，它的性能优于其余框架。可是，对Vue2.0代码的边缘状况和修复的数量使得Vue团队决定使用微优化彻底重写渲染代码。据Evan You介绍，这些优化能够在安装和初始化速度上增长100%。

与其余框架同样，VueJS使用虚拟DOM来呈现其组件。为了加速渲染过程，必须减小此虚拟DOM的工做负载。Vue3.0中包含了如下特性来知足这个目标：

编译提示——经过检索渲染过程，Vue 3.0将输出更好的编译时提示，这些提示显示了代码如何更好的优化。

组件快速确认——再也不经过检查模板对象是不是组件，VUE 3.0将假设大写标记为一个组件。这个假设消除了猜想，加快了渲染过程。

单形调用（Monomorphic Calls）———任何上过计算机科学课程的人-他们的大脑中都有多态性的概念，可是Vue 3.0在呈现过程当中使用了单形调用。这种微优化老是将形状相同的对象传递给渲染引擎，这使得Javascript引擎更容易优化。下图来自：Evan You对Vue 3.0的演讲

优化插槽———这个看似复杂的术语实际上归结为一个简单的概念：确保使用它们的实例跟踪依赖关系。目前，每当父组件和子组件具备更新的依赖项时，都将被迫从新呈现。可是，在3.0中，父级和子级将有不一样的依赖项，而且只有当它们各自的依赖项发生变化时才会更新。这大大减小了页面上发生的重呈现次数。

静态树提高———虽然这不算Vue3.0的更新(它已经存在于VUE 2.0中)，静态树的提高极大地提升了项目速度。提高的意思是不会从新呈现没有任何依赖项的静态元素.这大大减小了虚拟DOM的工做，并节省了许多项目开销。

Proxy Based Observations ——Vue 3.0将使用ES2015基于proxy-based observations来跟踪元素的变化。这哥改变不只消除了Vue 2.0没法支持的几种状况，并且还能够更好地执行。根据You的演讲，这些优化可使组件实例初始化速度比如今的1vue2.0版本提升100％。

基于Proxy实现比基于Observations的实现快两倍，内存的使用量也仅仅是Vue 2.0中Observations实现的一半。

更轻量级

目前，VueJS已经很小了（20 kb Gzip）。然而在Vue3.0中因为tree shaking（消除非重要代码）3.0的估计大小大约是10 kb Gzip。 这是经过删除全部对VUE项目非必需的库，并经过import语句(而不是在主src中打包)使用它们。

提升可维护性

Flow 到 TypeScript ———为了让更多用户更容易访问，Vue 3.0将从Flow转换为TypeScript。虽然代码库将被重写为使用Typescript，可是然兼容javascript写法。

更加模块化———与目前的Vue相比，VUE 3.0是将更加模块化，它依赖于本身的内部包来运行。这使得它具备可定制性和灵活性，同时也使它具备透明度，从而使开发人员可以真正进入源代码。

编译器重写———这是我最感兴趣的特性之一。这些更改不只能够有更好的IDE支持，并且如今它建立了源映射，这意味着当出现运行时错误时，它将给出错误的文件位置和行号。若是您如今在使用Vue，您就会知道如今的运行时错误消息对识别问题并无多大帮助。这个更新应该足以让开发者们心情大好。

更容易定位于Native

3.0将是与平台无关的———这意味着它将运行纯Javascript，而且不会在其主构建中使用诸如Node.js之类的Web特性。这使得为Web，iOS或Android构建应用程序变得更加容易。经过定位于Native，Vue使本身更像是React的替代品，它对iOS和Android项目提供了大量支持。

使开发人员的生活更轻松

虽然看似简单，但我认为这是使用VueJS的主要缘由 - 它简单但功能强大。这些都是突出的方面。

公开Reactivity API———公开后，新的更改将使得开发人员具备显式建立反应性对象的能力。以及建立自定义从新渲染钩子。3.0还解决了VueJS用户的常见抱怨：什么时候以及为何个人组件从新渲染？

如今有一个renderTrigged事件，它容许人们看到是什么触发了更新。一个神奇的功能，将使VueJS更加透明。

So What?

你可能在想，“那又怎样？人们仍然会使用React 或者 Angular。你也许是对的。 做为当前的行业标准，Reaction和Angular极可能仍然是组件框架中最受欢迎的选择。然而，在Vue 3.0中有一些有趣的东西能够讨论，这可能会使它在将来几年成为一种更具竞争力的选择。

速度 即便是如今，VueJS提供比React或Angular更快的渲染时间。经过Evan You讨论的微优化，Vue可能拥有其余框架的一半渲染时间。这是一个关键点，能够吸引一些开发人员远离其余环境。下表显示了Vue 2.0已经具备的速度和内存优点 - 新的更新应该进一步提升这些优点。

适应性 VueJS旨在易于实施。不管您是要将其添加到现有项目仍是使用它来为SPA提供支持，都有大量文档和用例可帮助您定义需求。在Vue 3.0中所作的更改，特别是 reactivity hooks和新的模块化设计，使这个已经灵活的语言更增强大。虽然我将继续强调VueJS的简单性，但有许多功能容许更多技术和经验丰富的开发人员彻底控制他们的项目。虽然我将继续强调VueJS的简单性，可是有许多特性容许更多的技术人员和经验丰富的开发人员彻底控制他们的项目。

文档 这多是“个人问题”，但我我的确实认为Vue的文档比React更易于理解。事实上，我甚至历来没有完成过HelloWorld教程或任何关于Vue的内容。文档足以让我理解使用案例并开始使用。你能够本身看看Vue 官方文档。

难度 就像我在谈论文档同样 - Vue很是平易近人。它不只使用天然HTML，CSS / CSS预处理器（如sass和scss）和Javascript，并且还为相对较新的框架提供了大量的支持和库。对于新开发人员而言，这是很是容易理解的，而且对于高级开发人员来讲很是容易扩展。

为了看到Vue 3.0的所有影响，咱们将不得不等到2019年某个时候（但愿如此）。 Evan You在多伦多VueConf展现的功能彷佛使Vue更增强大和高效，所以我对新版本寄予厚望。你对Vue 3.0和新的React、Angular有什么见解呢？