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

去年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中的五个关键变化：

1、更快

2、更小

3、更易于维护

4、更多的原生支持

5、更易于开发使用

现在让我们深入探讨这些。

让速度更快

这个主题占据了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有什么看法呢？