Vue 3.0 对 Web 开发意味着什么?

更新日期: 2019-02-13阅读: 4.9k标签: vue

前言

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


作者:Aemple
链接:https://juejin.im/post/5c5ae5b4e51d4501377b5bdf
来源:掘金

链接: https://fly63.com/article/detial/2001

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!