Vue 作者尤雨溪:以匠人的态度不断打磨完善 Vue

本文仅用于学习和交流目的。非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/art...

访谈对象

尤雨溪,Vue.js 创作者,Vue Technology创始人,致力于Vue的研究开发。

访谈内容

你为何选择从事前端方面的工作?

其实,我本科读的是艺术史,研究生阶段学习Design & Technology,是设计和技术的混合。开始做前端的一个重要原因是,没有人帮我把设计出来的作品放到网站上给别人欣赏。比如说设计一个网站,但是没人帮我把设计出来的网站做出来。所以我只能自己做,做着做着就发现做网站本身也很有趣。

做网站的过程中也涉及怎么写出好的代码,怎样把设计的作品实现出来,后来慢慢发现我对前端更感兴趣,也花费了更多的时间。

前端需要跟用户打交道,可以说,设计方面的背景其实对你的帮助很多。

肯定是有一定帮助的。

又是什么原因促使你萌生了开发Vue的想法?

在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用。当时用的一些现有框架,比如angular,太笨重了。个人而言,我更倾向于针对我的用力做一个更轻量化的实现,同时也想做一些实验练练手,研究一下angular到底是如何实现的。所以说,最早Vue是作为一个单纯的实验项目在做。

从2013年7开始,它的增长速度好几次都超出了我自己的期望,我就想能不能再用点力推一把。每次再推一把,它又超出我的预期,慢慢地就变今天这样了。

也有很大一部分原因是,我把Vue当作自己的一个作品,以匠人的态度不断地琢磨完善它。一个版本做出来之后,我会不断地思考打磨,到现在为止我已经重写过两次了。Vue每一次的增长,都会给我更多的动力继续前行。

但是,谷歌主打angular,不会对你有什么限制?

谷歌内部并不会强迫你一定要用什么技术,选择上还是自由的。当时我所在的团队也是比较特殊,creative lab以实验为主,强调速度。对这样的类型项目来说,angular会引入很多不必要的限制。

就像你刚才说的,Vue的代码简约,上手比较快。但是简约跟功能其实是矛盾的两个方面,顾到了简约,就可能限制功能,增加工具的功能性,代码就难免变得繁冗。怎么样做到这种鱼和熊掌的兼得?

英文里面有一个词叫Pragmatism,就是实用主义。在简洁的同时,Vue也强调使用者实现想做事情的目的。可以说,最早Vue是非常看重这一点的,我们也增加了很多类似于方便性质的API,比如说过滤器。

在早期设计还不是很成熟的时候,我从angular那边借鉴过来的一些功能并没有得到充分地考量。一开始感觉应该有作用,就先放了进来。重新迭代的过程中,我发现它们并没有那么好,也不如看起来那么方便。

随着用力的推广,Vue开始用于一些更长期的项目。这种情况下,一些短期内方便的功能变得难以维护。所以Vue在轻量和功能之间也发生了变化,从一开始的强调速度,简单上手,到后面的注重用户代码的可维护性,避免用户自己掉到自己写出来的陷阱里,一直在不断地转化。最终的目标是找到一个比较良好的平衡点,维持简易上手的良好体验,同时尽可能地避免一时的便易影响长期的可维护性。

眼前利益和长远利益同时兼顾。

对,比如说Vue 1.0、2.0每次变更、废弃API的时候,都会有很多讨论。很多时候,一些用户表示说,这么好用的东西,为什么要拿掉它?拿掉它的原因,其实是,用户用它们写出了一些很匪夷所思的代码。我看了之后就觉得,如果这个东西会导致大家写出这样的代码,可能还是拿掉它比较好一些。

国外的情况不太了解,但是国内有一些公司,比如说美团、滴滴、饿了么等这些互联网公司,都开始用Vue开发项目,您觉得国外是怎么样一个情况?

国外的话,Vue的增长趋势分两块。很多中小型的企业或者是创业公司会使用Vue开发项目。对他们来说,生产力是一个重要的衡量指标,强调周转效率,快速投入,快速结束项目。同时,培训新的开发者加入新项目,达到快速上手的水平也是一个很明显的需求,在这样的需求下,他们对Vue的采用度会非常高。

另外有一些大公司,像日本的Line还有任天堂,英国的一家大型百货连锁公司Sainsburry等也在大规模地使用Vue开发项目。有意思的是,美国主流的大公司,还是比较倾向于用他们自己的硅谷产品。可能源于产业文化的影响,毕竟Google和Facebook的牌子在美国实在是太响了。

Vue的成功给你的生活和技术上带来哪些改变?

最大的影响肯定是,我可以全职开发Vue,也有了时间做2.0的重构。2.0其实是打乱原有的结构,从头开始,重新构建,底层做了很大的改动。能够全职开发Vue,一方面源于网上社区的捐助,一方面来自一些其他的来源,收入上维持跟之前工作时的一样,但自由度的提高让我可以掌控自己的时间,做自己最想做的事情。

在Meteor工作的时候,有很长一段时间我都很纠结,因为我发现我其实更想做Vue,但是又不得不做公司的事情。虽然也跟公司谈过,却没有找出一个特别靠谱的结合方案,最后我还是决定自己出来干。

有些技术人员被业务忙得晕头转向,而个人能力得不到提高,尤其是技术方面。他们就很苦恼,不知道是屈从于业务,还是发展自己的技能?

我觉得自己很幸运,可以做自己特别想做的事情。但是,我希望技术人员不要盲目效仿。Vue是一个特例,很多机遇才让Vue发展到今天的样子。如果没有适当的渠道或者一定的经济支撑的话,我也没有办法全职开发Vue。

最近即将上线的2.0,相对于1.0,在功能和性能上有哪些改进?

总体来说,性能方面提升了将近一倍。我们在技术细节上做了很大改动,整个渲染底层完全换掉了,Virtual DOM的采用打开了很多新的可能,比如说服务端渲染,手动Render Function,以Vue作为运行时结合Weex渲染到原生的客户端。2.0一方面大幅度提升了性能,一方面拓展了更多使用Vue的场景。

另外,2.0在API上也做了更进一步的精简。2.0删掉的API比新增的API要多。之前也说了,Vue在简洁跟多功能之间不断寻求平衡,所以1.0里面的不少“鸡肋”功能——既可以用这个方式实现,又可以用那个方式实现,我们狠狠心就拿掉了。

2016年State of JavaScript的调查显示,Vue的受欢迎程度仅次于React。能否跟大家讲讲React和Vue在定位和内部实现方式上,有哪些异同点?

虽然两者在定位上有一些交集,但差异也是很明显的。Vue的API跟传统web开发者熟悉的模板契合度更高,比如Vue的单文件组件是以模板+JavaScript+CSS的组合模式呈现,它跟web现有的HTML、JavaScript、CSS能够更好地配合。

从使用习惯和思维模式上考虑,对于一个没有任何Vue和React基础的web开发者来说, Vue会更友好,更符合他的思维模式。React对于拥有函数式编程背景的开发者以及一些并不是以web为主要开发平台的开发人员而言,React更容易接受。这并不意味着他们不能接受Vue,Vue和React之间的差异对他们来说就没有web开发者那么明显。可以说,Vue更加注重web开发者的习惯。

实现上,Vue跟React的最大区别在于数据的reactivity,就是反应式系统上。Vue提供反应式的数据,当数据改动时,界面就会自动更新,而React里面需要调用方法SetState。我把两者分别称为Push-based和Pull-based。所谓Push-based就是说,改动数据之后,数据本身会把这个改动推送出去,告知渲染系统自动进行渲染。在React里面,它是一个Pull的形式,用户要给系统一个明确的信号说明现在需要重新渲染了,这个系统才会重新渲染。两者并没有绝对的优劣之分,更多的也是思维模式和开发习惯的不同。

两者不是完全互斥的,比如说在React里面,你也可以用一些第三方的库像MobX实现Push-based的系统,同时你也可以在Vue2.0里面,通过一些手段,比如把数据freeze起来,让数据不再具有反应式特点,或者通过手动调用组件更新的方法来做一个pull-based系统。所以两者并没有一个绝对的界限,只是默认的倾向性不同而已。

对于一般的技术人员来讲,掌握某项技术已经是不小的挑战,自己如果可以开发出来一个新工具应该说是一种瞻望的高度。你会给他们一些什么建议用于开发创造新的工具?

我的建议是永远要保持好奇心。很多人可能忙于应付业务,没有在业余时间做任何尝试探索,也就只能停留在这样的一个层面。另外,可能有些东西也是不能强求的,比如说我做Vue的时候,很多时候来自自己的兴趣。我并没有强迫自己一定要怎么样,是自发的一种渴望,我想去把Vue做得更好,然后就去研究了。

兴趣也是一个很重要的因素,就是说,如果有动力想要去做一件事情,你就尽可能地把兴趣稍微拔高一点,定一个更高一点的目标,看看能不能把兴趣推进一步。技术人员肯定会有自己感兴趣的技术方向,大部分在某个技术领域做出一定成就的人,可能都少不了浓厚的兴趣驱动。没有兴趣作为原动力的话,很难长久保持一种持续学习,持续研究的状态。我也不知道这种兴趣能不能后天培养,但是多探索、多尝试,说不定哪天你就发现了新事物。

——更多访谈

更多精彩,加入图灵访谈微信!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档读起来特别费力,基础差、底子薄的有可能一会就会被绕晕了,最起码英文文档中的代码与中文文档中的代码是一致的,但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB。   其中用到的软件:   Chart.js框架,版本1.0.2,一
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示: 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》,如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
HTML:让表单、文本框只读,不可编辑的方法有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使中国">的内容,"中国"两个字不可以修改。实现的方式归纳一下,有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中,移动端新近增加了一个功能“微信授权登录”,由于自己不是负责移动端开发的,但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作,谁让自己是负责人呢?原来负责人就是负责最后把所有的BUG解决掉。 首先,熟悉一下微信授权部分的源代码,如下所示:
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据,第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题,刚开始以为只是个警告,没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位,显示以下代码存在错误:
AngularJS控制器controller之间如何通信angular控制器通信的方式有三种:1,利用作用域继承的方式。即子控制器继承父控制器中的内容2,基于事件的方式。即$on,$emit,$boardcast这三种方式3,服务方式。写一个服务的单例然后通过注入来使用利用作用域的继承方式由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值
AngularJS路由问题解决遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了:Couldnotresolve'yhDtlMaintain/yhdetail'fromstate'yhMaintain'药店详情http://192.168.1.118:8088/lmapp/index.html#/0优惠券详情
书海拾贝之特殊的ng-src和ng-href在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下:1)浏览器加载静态HTML文件并解析为DOM;2)浏览器加载angular.js文件;3)angular监听DOMContentLoaded事件,监听到时开始启动;4)angular寻找ng-app指令,确定作用范围;
angularjs实现页面跳转并进行参数传递Angular页面传参有多种办法,我在此列举4种最常见的:1.基于ui-router的页面跳转传参(1)在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId
AngularJS实现表格数据的编辑,更新和删除效果实现首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据var app = angular.module('plunker', ['ui.bootstrap']);app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $sc
ANGULAR三宗罪之版本陷阱      坑!碰到个大坑,前面由于绑定日期时将angular版本换为angular-1.3.0-beta.1时,后来午睡后,登录系统,发现无论如何都登陆不进去了,经过调试,发现数据视图已经无法实现双向绑定了。自己还以为又碰到了“僵尸程序”了呢,对比药店端的程序发现并没有什么不同之处。后来自己经过一番思索才隐约感觉到是不是angular的版本造成的,将版本换为之前
JS实现分页操作前言 项目开发过程中,进行查询操作时有可能会检索出大量的满足条件的查询结果。在一页中显示全部查询结果会降低用户的体验感,故需要实现分页显示效果。受前面“JS实现时间选择插件”的启发,自己首先需要查看一下HTML5能否实现此效果。 整了半天,不管是用纯CSS3也好,还是用tmpagination.js还是bootstrap组件也好,到最后自己静下心来理
浏览器兼容性解决之道前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标,Angular团队声明:Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本,它们也不会保证An
JS利用正则表达式校验手机号绪 由于项目需求,需要在前端实现手机号码的校验。当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完成校验,然后将校验结果返回给客户端,客户端根据返回的结果再进行进一步的处理。如此反而复杂化了处理过程。 其实,处于安全考虑,应该在服务端进行二次校验。以下为在客户端的JS中校验手机号码格式
基于项目实例解析ng启动加载过程前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。 下面以实际项目为例进行简要讲解。1.载入ng库2.等待,直到DOM树构造完毕。3.发现ng-app,自动进入启动引导阶段。4.根据ng-app名称找到相应的路由。5.加载默认地址。6.Js顺序执行,加载相应模版页sys_tpls/