VueJs到底从Angular1.x抄了什么？,澳洲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人负责铺设铁轨，以及支援空防或其他勤务，才能够开始进行炮弹射击。

呵呵，呵呵

另外几个问题

关于闪一下的问题，因为时间有点长了记忆可能有偏差。ng-cloak我试过了，没有解决问题。可能的原因是我使用了$timeout()，这又引出数据绑定方式的差异。另外，“闪”之所以在我的应用上表现明显跟应用场景有关，用户每次键入都要重新渲染（全部或者差值）。当然，就像文中所说AngularJS的实现应该也有更好的做法。我是从学习曲线的角度对比的，而不是性能。
其实我是实现了4遍。第一遍是参加ThoughtWorks前端编程竞赛（第一次接触JavaScript）使用的是纯Js+Canvas；第二遍是GWT，一个后端工程师面对JavaScript强大退而求其次了；第三遍是AngularJS，重回JavaScript，爱上Angular；第四遍初学VueJs。
知乎评论中有同学指出VueJs 2.x也有类似$digest这样的坑，我没遇到但是保留在这里提醒初学者注意。（查看知乎原文请点击文末查看文章原文）

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