在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “
Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0
的更新计划、方向进行了详细阐述。目前该演讲的 PPT 也已上传至 Google
文档,感兴趣的可点此查阅。 

澳门新葡萄京所有网站 1

时间: 2019-02-13阅读: 1904标签: vue前言

澳门新葡萄京所有网站 2

           

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

可以看到,Vue 3.0 将会:

               

现在的Vue是怎样的?

1、更快

               
第二届中国前端开发者大会(FDCon2017)是在上海举办的针对前端技术(HTML5,CSS,JS)的互联网开发者所举办的最盛大和权威的相关技术会议,由技术社区TopGeek主办、汇智Tek联合主办,致力于推动各类前端技术等在移动互联网领域的研发和应用。

用他们自己的话来说,Vue是一个“用于构建用户应用程序的渐进式框架”。它的设计非常灵活,既可以将单个Vue库合并到其他项目中,也可以完全用VUE驱动复杂的项目。

  • Virtual DOM 完全重写,mounting & patching 提速 100% ;

  • 更多编译时(compile-time)提醒以减少 runtime 开销;

  • 基于 Proxy 观察者机制以满足全语言覆盖及更好的性能;

  • 放弃 Object.defineProperty ,使用更快的原生 Proxy ;

  • 组件实例初始化速度提高 100% ;

  • 提速一倍/内存使用降低一半。

               
随着新一代的前端技术的发展,给前端开发者带来巨大的创新应用实践机会,本大会以“高效前端开发实践和创新”为主题,内容涵盖电商、旅游、门户、搜索、分类广告、移动互联网等多种业态的技术经验分享,涉及各种WEB和APP前端开发技术和架构设计等方法论。

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

澳门新葡萄京所有网站 3

                参与演讲的主要有以下大牛:

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

2、更小

澳门新葡萄京所有网站 4

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

  • Tree-shaking 更友好;

  • 新的 core runtime: ~10kb gzipped

                 

Vue3.0中最明显的变化

澳门新葡萄京所有网站 5

                 
Vue Technology LLC 创始人 尤雨溪主要介绍了把2.0发布之后的进展情况,包括接下来他针对Vue
2.0版本迭代计划的展望。Vue经历了技术上新的变化,去年9月底发布了2.0,从头重写但是保留了绝大部分API。引入了Flow类型检查,提高代码健壮性。基于virtual
 dom的渲染机制,更轻、更快,获得跨平台渲染能力,还有官方Typescript支持。尤雨溪指出,Vue
2.0版本依然是使用模板,Vue有一个把模板编译到渲染函数的过程,首先这个架构能支持模板和手写函数,对于一些用户来说更偏向渲染函数,能够给他们用真正的程序语言进行表达的灵活性。

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

3、更易维护

                  Vue 2.0 2017年展望:

1、更快

  • Flow -> TypeScript

  • Decoupled Packages(解耦包)

  • 编译器重写

                                               
1、更好的TypeScript整合:TypeScript团队为Vue量身打造更好的类型类型推导。

2、更小

澳门新葡萄京所有网站 6

                                                2、单文件组件 CSS
改进:>>> 和 ::slotted 选择器,CSS variable theming

3、更易于维护

4、更易于原生

                                               
3、
SSR 性能进一步优化 

4、更多的原生支持

  • 自定义 Renderer API

*                                                4、Vuex 与 Rx 的整合*

5、更易于开发使用

澳门新葡萄京所有网站 7

                                               
5、
基于 Proxy 的响应式系统重构

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

5、让开发者更轻松

                                                       
○ 不再需要 Vue.set
                                                       
○ Lazy observation
                                                       
○ 显式构建响应式对象 

让速度更快

  • Exposed reactivity API

  • 轻松识别组件重新渲染的原因

  • 改进 TypeScript 以支持 w/TSX

  • 改进警告追踪

  • Experimental Hooks API

  • Experimental Time Slicing Support

  • 支持 IE11

                                                6、HTML Modules:

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

澳门新葡萄京所有网站 8

                                                       
类似单文件组件的新标准(由 Google 起草中)

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

PPT 地址:Vue 3.0 Updates

*                 * PPT分享链接 : 

与其他框架一样,VueJS使用虚拟DOM来呈现其组件。为了加速渲染过程,必须减少此虚拟DOM的工作负载。Vue3.0中包含了以下特性来满足这个目标:

(文/开源中国)    

【Vue 2017现状和展望】尤雨溪-Vue Technology LLC 创始人, Vue.js 作者  

 http://note.youdao.com/noteshare?id=81c3bfc1633ea496d70375bdd92d728a

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

 

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

             澳门新葡萄京所有网站 9

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

 

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

                  携程框架研发部高级研发经理
魏晓军主要介绍了CRN-WEB(Ctrip React Native Framework For
Web),主要分四个部分,一个是讲什么是CRN-WEB。第二是CRN-WEB的架构设计。第三如何使用CRN-WEB。第四CRN-WEB的现状及发展。

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

*           *       CRN-WEB未来的展望:

Proxy Based Observations——Vue 3.0将使用ES2015基于proxy-based
observations来跟踪元素的变化。这哥改变不仅消除了Vue
2.0无法支持的几种情况,而且还可以更好地执行。根据You的演讲,这些优化可以使组件实例初始化速度比现在的1vue2.0版本提高100%。

                                             
 1、功能完善及性能优化,完善浏览器端的兼容性问题

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

                                             
 2、和去哪儿团队合作开发YRN-WEB  CRN-WEB = YRN-WEB + Ctrip Busine

更轻量级

                                             
 3、多实战、 开发更快捷的工具 

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

                 PPT分享链接 : 

提高可维护性

CRN-WEB(Ctrip React Native Framework For Web)】-魏-晓军 -携程框架研发部高级研发经理

http://note.youdao.com/noteshare?id=c6b20ac977f6afb556f5f2ec65dbe032

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

 

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

澳门新葡萄京所有网站 10

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

 

更容易定位于Native

                   
阿里巴巴前端专家渚薰大神主要介绍了四个方面,一个是什么是交互,二个是交互的作用,三个是交互的的性能优化,四个是与交互相关的工具以及前沿技术。

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

                 
  渚薰大神大神对于交互有以下的观点,我认为总结的非常的好:

使开发人员的生活更轻松

                                      1、交互,是链接⽤户的桥梁

虽然看似简单,但我认为这是使用VueJS的主要原因 –
它简单但功能强大。这些都是突出的方面。

                                      2、动画,是展现⻚⾯的灵魂

公开Reactivity
API
———公开后,新的更改将使得开发人员具有显式创建反应性对象的能力。以及创建自定义重新渲染钩子。3.0还解决了VueJS用户的常见抱怨:何时以及为什么我的组件重新渲染?

                                      3、互动是前端界的⼜⼀股泥⽯流

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

                    与WebGL框架相关的技术:

So What?

                                      1、Three.js

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

                                      2、stack.gl

速度 即使是现在,VueJS提供比React或Angular更快的渲染时间。通过Evan
You讨论的微优化,Vue可能拥有其他框架的一半渲染时间。这是一个关键点,可以吸引一些开发人员远离其他环境。下表显示了Vue
2.0已经具有的速度和内存优势 – 新的更新应该进一步提高这些优势。

                                      3、Unity 

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

                                      4、BabylonJS 

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

                                      5、PlayCanvas

难度 就像我在谈论文档一样 – Vue非常平易近人。它不仅使用自然HTML,CSS
/
CSS预处理器(如sass和scss)和Javascript,而且还为相对较新的框架提供了大量的支持和库。对于新开发人员而言,这是非常容易理解的,并且对于高级开发人员来说非常容易扩展。

【H5互动的正确打开方式】-渚薰-阿里巴巴前端专家

http://note.youdao.com/noteshare?id=8913e7572edf189c863af83cd9acdbf1

为了看到Vue
3.0的全部影响,我们将不得不等到2019年某个时候(希望如此)。Evan
You在多伦多VueConf展示的功能似乎使Vue更加强大和高效,因此我对新版本寄予厚望。你对Vue
3.0和新的React、Angular有什么看法呢?

 

作者:Aemple链接:来源:掘金

                        澳门新葡萄京所有网站 11

 

                   
美团点评的前端技术专家张强主要介绍了三个方面,一是 前端史,二是Redux的问题,三是私货

                    张强认为,前端史分为下面三个时代:

                                                1、古典时代          

                                                2、中世纪时代

                                                3、⽂艺复兴 时代

                    duxjs特性:
                                 • 声明式API,没有样板代码
                                 • 模块化/组件化,可嵌套,可动态加载
                                 • 统⼀的异步处理
                                 • 同构
                                 • HMR热替换
                                 • 插件 

【Redux的打开方式】张强-美团点评前端技术专家

http://note.youdao.com/noteshare?id=2ba514586b9d564b6080ee35ecc797a1

 

 澳门新葡萄京所有网站 12

                        

                 
 前端资深工程师题叶主要介绍了四个方面,一是Weex的使用场景
,二是Weex使用方式,三是Weex页面性能,四是Weex与主流技术比较。

                   Weex与HTML5、React Native之间的对比:

                  澳门新葡萄京所有网站 13

                         

【Weex 在饿了么前端的实践】-题叶- 饿了么前端资深工程师

http://note.youdao.com/noteshare?id=5a43ca84614344668d554a22e7285f99

 

                   第二届中国前端开发者大会(FDCon2017)资料总结汇总:

 

 第二届中国前端开发者大会【视频汇总】   

http://www.itdks.com/dakashuo/play/858

 第二届中国前端开发者大会【嘉宾发言文字汇总】   

 https://d.wps.cn/v/8mPL0?_=1491645028743&s=qr

【第二届中国前端开发者大会】讲师课件下载       

 http://note.youdao.com/share/index.html?id=6a70fae9eb4b4e1aaebcd3c8fb210492&type=note#/

【精彩回顾】2017第二届中国前端开发者大会      

 http://mp.weixin.qq.com/s/CA3O_OD9RlzYwFsM0vTDCw

 

 

“JS是世界上最好的语言”

 

“前端工程师是公司里最牛的岗位**