原文地址: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 中的五个关键变化:

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 有什么看法呢?

  • Vue.js

    Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。 主要特性: 可扩展的数据绑定 将普通的 JS 对象作为 model 简洁…

    109 引用
感谢    赞同    分享    收藏    关注    反对    举报    ...