Vue 2017 现状与展望 | 视频+PPT+速记快速回顾

微软Typescript团队和VS Code团队亲自给Vue开发插件,下一个版本的Vue 2.4将由微软提供支持Vue使用Typescript,之前为VS Code写vue扩展插件的人已入职微软VS Code团队
讲师 | 尤雨溪
速记 | kalasoo
5 月 20 日,在全球首届 VueConf 上,Vue.js 作者尤雨溪介绍了 Vue.js 2017 的现状,并对 Vue 的未来做了展望。本文是对此次演讲的回顾。获取更多Vue相关内容,请关注前端之巅公众号并回复“Vue”。
视频回顾


建议视频和下文的 PPT 及速记结合观看。

class="video_iframe" data-vidtype="1" allowfullscreen frameborder="0" height="417" width="556" scrolling="no" data-src="https://v.qq.com/iframe/preview.html?vid=s0506yc3u0e&width=500&height=375&auto=0">


一、Vue 的起源


  • 2013 年 6 月:First Commit (Seed)

  • 2013 年 12 月:第一次将项目名字 Vue

  • 2014 年 2 月:第一次公开发布 Hacker News

  • 2014 年 11 月:0.11 版本(重写)

  • 2015 年 4 月:Laravel 社区作者开始使用并宣传

  • 2015 年 10 月:Vue.js 1.0 发布

  • 2016 年 10 月:Vue.js 2.0 发布(重写 & 一定的向后兼容)


二、Vue 的定位
 早期定位


Just a View Layer Library

最早只想解决一些视图层的问题,并没有完全服务于大型业务的功能。但是随着 Vue 的发展开始增加辅助工具,例如 vue-router, vue-loader, vuex


 进化后的定位


The Progress Framework

不需要完全的全家桶,而是可以渐进式的根据需求一点点增加业务复杂度。这样易于上手,也可以更快的应用在老业务上,比侵入式框架易于上手。


三、Vue 的现状


  • GitHub 超过 53,986 个 Star 数,已经是历史的 Top 10

  • 每月 55 万 + 次 NPM 下载(不算阿里爸爸 CNPM 镜像)

  • Chrome DevTool 插件 17.4 万日活

  • 国内用户:

  • 314 Contributors

  • 社区化的开源产品:NUXT.js,Quasar Framework(Ionic),Element,iView,Muse-UI,Vux,Vuetify,Vue Material

  • 与阿里合作的 Weex

  • Microsoft Build TypeScipt 老大作者 Anders Hejlsberg 在 Demo 中 Vue + VSCode 中可以推倒

  • Google I/O Addy Osmani 介绍 Vue + PWA


Vue 2.3
 服务端渲染改进 ssr.vuejs.org


在存在代码分割的情况下,通过分析 Webpack 服务端和客户端的构建信息,自动推导需要在客户端预加载的文件,生成最优的 <script><link re="preload/prefetch"> 链接


 异步组件改进


Loading / Error / Timeout Fallback


 函数式组件改进


  • 不再需要显示式 props


 其他改进


  • Passive 事件侦听:@touchmove.passive

  • .sync 回归了


Vue 2.4
Vue 2.4(K__)
 与 TypeScript 更好的整合


  • TypeScript 团队 Type 声明

  • VSCode 团队最好的 IDE


 SSR 性能进一步优化


通过编译时优化获得 2~8x 性能提升,通过字符串实现性能优化,但是很多 2.0+ 都是用 render 实现的。现在是可以自动分析出来,非组件内容多的话,可以快速提升。


 SSR + webpack code split 完美支持


不再局限于路由


 vue-cli 3.0


  • 配置依赖化 + 可组合(更新升级)

  • PWA by default

  • 一个模版,不同参数(--ts, --sr ...)

  • 更好的测试方案


长期展望



素材来源
 视频及 PPT 来源


视频及 PPT 由 Vue.js 官方、W3C 中国、w3ctech、前端圈共同举办的全球首届 VueConf 提供。

PPT 下载链接:https://img.w3ctech.com/VueConf-Beijing.pdf


 速记来源


掘金《VueConf 大会现场笔记》

https://juejin.im/post/591fa2d0a0bb9f005f3ccd1b?from=singlemessage&isappinstalled=0

以上素材均已获得授权。

原文地址:https://mp.weixin.qq.com/s/bkE5BVzz7AUCJB4yc9rxbQ


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从控制台输入一个数 num 与之前定义的数 n 进行比较

//从控制台输入一个数 num 与之前定义的数 n 进行比较&#xff0c;//如果 numn 提示“找到了”//并跳出循环&#xff0c;如果 num<n 提示“小了”&#xff0c;//如果 num>n 提示“大了”,并让其重新输入&#xff0c;//如果 4 次都没有猜对&#xff0c;则提示“抱歉&#…

MySQL多对多创建表语句(防忘记)

-- 演员表 CREATE TABLE actor (id INTEGER NOT NULL -- 演员编号 , NAME VARCHAR(35) -- 演员姓名 , PRIMARY KEY (id) )DEFAULT CHARSETutf8; CREATE INDEX actor_name ON actor(NAME);-- 电影表 CREATE TABLE movie (id INTEGER NOT NULL -- 电影编号 , title VARCHAR(70) -…

TS常用的类型

// 也可以直接使用字面量进行类型声明 let a: 10; a 10;// 可以使用 | 来连接多个类型&#xff08;联合类型&#xff09; let b: "male" | "female"; b "male"; b "female";let c: boolean | string; c true; c hello;// any 表示…

6 道 BATJ 必考的 Java 面试题

转载自 6 道 BATJ 必考的 Java 面试题 题目一 请对比 Exception 和 Error&#xff0c;另外&#xff0c;运行时异常与一般异常有什么区别&#xff1f; 考点分析&#xff1a; 分析 Exception 和 Error 的区别&#xff0c;是从概念角度考察了 Java 处理机制。总的来说&#…

终于知道什么情况下需要实现.NET Core中的IOptions接口

自从接触 IOptions 之后&#xff0c;一直纠结这样的问题&#xff1a;自己定义的 Options 要不要实现 IOptions 接口。 微软有的项目中实现了&#xff0c;比如 Caching 中的 MemoryCacheOptions &#xff1a; public class MemoryCacheOptions : IOptions<MemoryCacheOptio…

有5家衣服专卖店,每家最多购买3件,用户可以选择离开,可以买衣服,最后打印总共买了几件衣服

//有5家衣服专卖店&#xff0c;每家最多购买3件。//用户可以选择离开&#xff0c;可以买衣服。//最后打印总共买了几件衣服 public static void test4(){int count 0;Scanner sc new Scanner(System.in);String an "";//用户没说话&#xff0c;y&#xff0c;买。n…

TS对象中的实例属性和静态属性

// 使用class关键字来定义一个类 /* * 对象中主要包含了两个部分&#xff1a; * 属性 * 方法 * */ class Person{/** 直接定义的属性是实例属性&#xff0c;需要通过对象的实例去访问&#xff1a;* const per new Person();* per.name** 使用st…

Spring开启注解AOP的支持放置的位置

放在springmvc的aop,需要在springmvc的配置文件中写开启aop,而不是spring的配置文件 最近使用aop来记录controller的日志. 但是发现没有起作用. 后来发现是因为我的 aop 是写在controller层(在springmvc的容器中 -web中) 而开启aop配置却写在spring(applicationContext.xml)中…

Amazing ASP.NET Core 2.0

前言 ASP.NET Core 的变化和发展速度是飞快的&#xff0c;当你发现你还没有掌握 ASP.NET Core 1.0 的时候&#xff0c; 2.0 已经快要发布了&#xff0c;目前 2.0 处于 Preview 1 版本&#xff0c;意味着功能已经基本确定&#xff0c;还没有学习过 ASP.NET Core 的同学可以直接…

Myeclipse编辑器简单使用整理

1.重置工作面板&#xff1a; window–>Reset Perspective 2.保存工作面板&#xff1a; window–>Save Perspective 3.切换工作区间&#xff1a; file–>Switch Workspace–>other–>Browse–>选择需要切换到的目录下–》软件自动重启完即可。 4.在myeclipse中…

Java面试常问计算机网络问题

转载自 Java面试常问计算机网络问题 一、GET 和 POST 的区别 GET请注意&#xff0c;查询字符串&#xff08;名称/值对&#xff09;是在 GET 请求的 URL 中发送的&#xff1a;/test/demo_form.asp?name1value1&name2value2 GET 请求可被缓存 GET 请求保留在浏览器历史…

使用DocFX生成文档

文档生成工具DocFX&#xff0c; 类似JSDoc或Sphinx&#xff0c;可以从源代码中提取注释生成文档之外&#xff0c;而且还有语法支持你加入其他的文件链接到API添加额外的说明&#xff0c;DocFX会扫描你的源代码和附加的文件为你生成一个完整的HTML模版网站&#xff0c;你可以自己…

如何在一分钟内搞定面试官

转载自 如何在一分钟内搞定面试官 很多人的求职面试的过程中都会遇到这个问题&#xff1a; “请做个自我介绍。” 有的人&#xff0c;可以口若悬河、妙语连珠讲3分钟&#xff0c;有的人&#xff0c;可能磕磕巴巴&#xff0c;讲了30秒&#xff0c;前者一定能胜过后者&#x…

数组遍历VS对象遍历

数组遍历 const nameArray2 [zhao, qian, zhang, sun, li]; nameArray2.map(() > {}); // return const filterResult nameArray2.filter((value) > {return value zhang; }); // return array nameArray2.forEach(() > {}); // no return对象遍历 Object.keys(o…

logback-spring.xml配置文件

logback-spring.xml配置文件 自己改下value"G:/logs/pmp"这个值&#xff0c;如果你相关依赖弄好的话&#xff0c;直接复制粘贴即用 输出的日志文件的名称最好也改下&#xff0c;下文中${log.path}/web_info.log是因为我这个模块就叫web&#xff0c;要改的话&#x…

基于ZKWeb + Angular 4.0的开源管理后台Demo

这是一套基于ZKWeb网页框架和Angular 4.0编写的开源管理后台Demo&#xff0c;实现了前后端分离和模块化开发&#xff0c; 地址是: https://github.com/zkweb-framework/ZKWeb.MVVMDemo &#xff0c;开源协议是MIT&#xff0c;你可以随意的修改并用于个人或商业用途 我之前已经…

祝我们的所有女孩子,女生节快乐~

公历3月7日是女生节。起源于20世纪90年代初&#xff0c;由山东大学发起&#xff0c;后发展于中国各高校&#xff0c;是一个关爱女生、展现高校女生风采的节日。女神节快乐祝我们18级青鸟1班的女孩儿们&#xff0c;女生节快乐&#xff01;愿快乐与你作陪&#xff0c;美丽将你跟随…

从 0 开始手写一个 Spring MVC 框架,向高手进阶

转载自 从 0 开始手写一个 Spring MVC 框架&#xff0c;向高手进阶 Spring框架对于Java后端程序员来说再熟悉不过了&#xff0c;以前只知道它用的反射实现的&#xff0c;但了解之后才知道有很多巧妙的设计在里面。如果不看Spring的源码&#xff0c;你将会失去一次和大师学习…

SpringBoot 使用Thymeleaf模板 没有提示

参考文档&#xff1a;IDEA使用Thymeleaf输入 th: 没有智能提示的全新解决办法&#xff08;写于2020年8月14日&#xff09; <!DOCTYPE html> <html lang"en" xmlns:th"http://www.w3.org/1999/xhtml"> <html lang"en" xmlns:th&q…

把Springboot项目部署到服务器上和结束运行

部署 nohup java -jar onlile-1.0.0-SNAPSHOT.jar &关闭 kill -9 22899 杀死 进程的pid &#xff0c;关闭程序。cat info.log 查看文件ps -ef | grep java 查看java 运行的几个进程 pid