VueJs到底从Angular1.x抄了什么?

2017年08月05日 澳洲IT匠人圈


点击上面蓝字关注我们

封面

题图为多拉重炮来自Wikipedia,文末有彩蛋。

文 |  肖鹏

编辑 | 灯泡点灯

时长 | 7min


首先

大漠穷秋发了一篇《Angular有哪些地方比Vue更优秀》(以下称《优秀》)( 回复“vue” 查看文章 )之后受到了不少质疑(包括我),然后就又发了一篇《为什么只会Vue的都是前段小白》(以下称《小白文》)( 回复“小白” 查看文章 ),声称碰到了小白们的痛处。在我看到的评论中绝大部分有内容的都是即用过Angular又用过VueJS的同学写的,这跟大漠下面定义的小白似乎不太一致。当然《小白文》用了“只会”之后各位前端大咖们就没法质疑了,因为你质疑了就是小白了(这个套路我给满分)。我作为一名后端架构师,你说我前端小白就小白吧,反正我也不在乎:)


Vue哪些是从AngularJS 1.x里面抄来的


好了,咱们就事论事,先从第一点开始。“Vue里面大部分内容都是从AngularJS 1.x里面抄来的”,看到这里真是让人吐血。我们来看看Vue.js到底从AngularJS抄了什么呢?官方文档(https://vuejs.org/v2/guide/comparison.html)是这样说的—“Vue 的一些语法和 AngularJS 的很相似(例如 v-if vs ng-if)。因为 AngularJS 是 Vue 早期开发的灵感来源”。可以说除此之外,VueJs跟React的相似度更高。包括Virtual DOM,响应式组件。你所说的“大部分”从何说起(呼唤严谨性)?做技术宣传的就可以闭着眼睛说瞎话吗?数据绑定是双方核心的特性。AngularJS使用的是双向绑定(dirty-check)而Vue强制使用单向的数据流。这样大的区别你是不知道还是不懂?


至于Vue对AngularJS语法上的借鉴,其实主要是在DOM标示上的。然而,Vue要使用HTML模板,无非有这么几个选择——element tag、class、attribute、comment。四个选择AngularJS都支持,你用哪一个都是“抄”。如果这样的借鉴可以被拿来讽刺的话,那么AngularJS里面Controller、Service、Model的概念我难道可以说是抄的Spring MVC吗?当然我们后端从来都是很团结很大度的,毕竟PHP才是世界上最好的语言:)



前面的内容来自官方文档,下面说一下我自己的经验。我有幸用AngularJS和VueJS将同一个应用(www.zenuml.com)实现了两遍【更新2】,所以得以体会二者的区别。现在这个版本是VueJS写的,AngularJS的版本我稍后会加上来,供大家直接对比。之所以选择VueJS,很大的原因是渲染效果,AngularJS版本(基于脏检查)每次重新渲染的时候都会闪一下,而VueJS的版本(基于Virtual DOM)则完全没有这个问题【更新1】。坦白地讲,也许是我的AngularJS版本的实现上的问题,但是AngularJS版本是在我用了AngularJS将近一年之后做的,而VueJS是我边学边做的,可见二者的学习曲线的差别。另外,并不是所有的应用都要做成SPA(单页应用)的,这一点上VueJS灵活的多。还是拿我的zenuml来说,加载了JS文件之后只要页面上有对应的id,这个组件的渲染是自动的。既没有ng-app这样的要求,也不需要angular.bootstrap这样的显示启动。



作者说到Vue“框架和工具都没有对集成测试做任何支持”,我只能说你...(文明人不能骂人)?vue-cli生成的代码里面就有e2e/unit,开箱即用啊。我的经验是VueJS写测试的成本要低得多(至少相对于AngularJS 1.x是这样的)。这很大程度上归功于响应式。Directive/Component的行为决定因素更加明确。还有你的《优秀》一文中说测试用例模板都是自动生成的,你们前端都不TDD吗?(隐约打击了一大批,别紧张反正我写前端的时候也不TDD:))你讲到的生态环境的问题,这算是拿一个高中生和一个小学生比体重吗?


作者说到用VueJS的人因为英语不好,墨尔本就很多公司用VueJS啊。看看Meetup就知道了,你就真的不做一点点调查就敢下结论吗?

我很难理解作者是如何从一个人只会VueJS推断出这么多“糟糕的”东西,而且是各种“一定”。我们这样一个理性的群体里面怎会有这么不讲逻辑的事情发生。我也很庆幸,我“只会”AngularJS的时候没有人这样武断的批评我不会EmberJS、Knockout或者Backbone。


Vue社区的小白含量是“最高的”,我完全没有直观感受,可能我跟作者喜欢待得不是一个社区。如果你跟我在一个VueJS社区的话你会看到很多很有价值的讨论,特别是响应式对我的启发很大。惭愧地说,学习React的时候我都没搞明白什么是响应式。我谨慎地怀疑作者有没有用VueJS写过完整的项目,因为如果你但凡认真的使用的话很难不注意到Reactiveness(响应式)所带来的好处,而在这里信口开河。我相信作者用AngularJS也一定有陷在$digest怪圈的时候,这在VueJS里面是不会存在的【更新3】。

与作者的判断相反,我认为大部分在这个时候接触VueJS的大部分属于热爱新技术的(不论是个人还是公司)。


AngularJS是一个优秀的框架,没有这个框架我从后端接触前端的道路不会这么轻松。只是像大漠穷秋这样的去宣传Angular实在是有误导的,尤其是对于刚刚接触前端的同学(包括像我一样从后端慢慢开始接触前端的)。术业有专攻也好,闻道有先后也罢,用知不知道一种技术判断一个人这样的事情我是不会做的。如果有兴趣单独讨论可以加我的微信(EagleXiaoCn),接头暗号“前端小白”。我有一个公众号更新频率不高这里就不公布了,省得别人认为我蹭热点。

希望这篇文章能传播到《小白文》所到过的地方,提供一种不同的视角。


最后的但不是最不重要的,你在《优秀》一文中用的压题图片,不是坦克(你连Wikipedia都不查一下吗?)叫做古斯塔夫巨炮(或者多拉重炮?)。有意思的是——其巨大的体积必须由将近一个营约250人以三个工作天的时间组装起来,另外将近一个旅大约2500人负责铺设铁轨,以及支援空防或其他勤务,才能够开始进行炮弹射击。


呵呵,呵呵


另外几个问题

  1. 关于闪一下的问题,因为时间有点长了记忆可能有偏差。ng-cloak我试过了,没有解决问题。可能的原因是我使用了$timeout(),这又引出数据绑定方式的差异。另外,“闪”之所以在我的应用上表现明显跟应用场景有关,用户每次键入都要重新渲染(全部或者差值)。当然,就像文中所说AngularJS的实现应该也有更好的做法。我是从学习曲线的角度对比的,而不是性能。

  2. 其实我是实现了4遍。第一遍是参加ThoughtWorks前端编程竞赛(第一次接触JavaScript)使用的是纯Js+Canvas;第二遍是GWT,一个后端工程师面对JavaScript强大退而求其次了;第三遍是AngularJS,重回JavaScript,爱上Angular;第四遍初学VueJs。

  3. 知乎评论中有同学指出VueJs 2.x也有类似$digest这样的坑,我没遇到但是保留在这里提醒初学者注意。(查看知乎原文请点击文末查看文章原文)


布里斯班Meetup:遇见五位行业大咖


往期回顾

应聘|如何在澳洲找到一份工作, 成为Offer收割机

大漠|大漠穷秋-逐步为你剖析前端学习之路
干货|怎么学好IT?IT学习平台吐血整理

活动|布里斯班,IT圈精英交流会

招聘|17年8月招聘,遇到最好的你




澳洲 IT人自己的社群

为了帮助更多的人找到工作,大神们跳槽和交流技术,我们组织创建了“澳洲IT求职技术群”,有上百位小伙伴与你一样爱知求真。由于目前大群人数已过百,想要入群的朋友可以


长按识别下面的图片,让小花客服邀请入群


我们是谁

澳洲IT匠人圈打造澳洲IT精英圈,希望在澳洲的广大IT认识团结互助,让在土澳的我们也能感受到高科技的光芒。组织IT社交圈,推送招聘广告,精品干货文章,澳洲业界动态,也期待更多有梦想的人加入。


我们也希望有同样理想的你加入我们。

投稿,请联系小花或E-Mail

[email protected]

商务联系

首席勾搭官 | +61 411 392 977

UA勾搭小花 | 微信 uniapp001


欢迎扫描关注 IT匠人圈企业号

收藏 已赞